\r\n \r\n {items.map(item => (\r\n \r\n
\r\n );\r\n};\r\n\r\nEditVideoNavigationView.propTypes = {\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func,\r\n }).isRequired,\r\n currentView: PropTypes.string,\r\n setCurrentView: PropTypes.func.isRequired,\r\n};\r\n\r\nEditVideoNavigationView.defaultProps = {\r\n currentView: AssetsId,\r\n};\r\n","import { makeStyles, tokens } from '@fluentui/react-components';\r\n\r\nexport const useStyles = makeStyles({\r\n topNavigation: {\r\n paddingLeft: '10px',\r\n paddingRight: '10px',\r\n paddingTop: '10px',\r\n paddingBottom: '10px',\r\n },\r\n topNavigationParent: {\r\n display: 'flex',\r\n justifyContent: 'space-between',\r\n },\r\n topNavigationLeft: {\r\n textAlign: 'left',\r\n },\r\n topNavigationRight: {\r\n textAlign: 'right',\r\n },\r\n divider: {\r\n marginBottom: tokens.spacingVerticalL,\r\n },\r\n recommendedImage: {\r\n marginBottom: tokens.spacingVerticalL,\r\n },\r\n});\r\n","import { getTextAssetCollectionConfig } from '@bingads-webui-campaign-react/pmax-text-input';\r\n\r\nconst collectionConfig = {\r\n headlines: {\r\n labelText: _TL_('Text'),\r\n placeholderText: _TL_('Enter your text'),\r\n fieldName: 'short-headline',\r\n singleAssetValidationPropsField: 'Headline',\r\n validationPropsField: 'Headlines',\r\n addButtonText: _TL_('Add text'),\r\n copilotButtonLabel: _TL_('Get recommendations for your text'),\r\n deleteButtonLabel: _TL_('Remove text'),\r\n minCollectionSize: 1,\r\n maxCollectionSize: 1,\r\n errorMessage: _TL_('Text is required'),\r\n helpPopupTopic: 'pop_BA_VideoTemplates_Text',\r\n helpPopupAriaLabel: _TL_('Click to learn more about text'),\r\n inlineRecommendationsTitle: _TL_('Recommended texts'),\r\n inlineRecommendationsHelpTopicKey:\r\n 'pop_BA_Recommendations_Pmax_Shortheadlines',\r\n inlineRecommendationsHelpTopicAriaLabel: _TL_('Click to learn more about text recommendations'),\r\n inlineRecommendationsDisabledItemTooltip: _TL_(\"You've reached the maximum number of texts. Please remove one text if you'd like to add this recommended text.\"),\r\n duplicateErrorMessage: _TL_('Duplicate texts are not allowed'),\r\n },\r\n};\r\n\r\nexport const getShortHeadlineAssetCollectionConfig = i18n => getTextAssetCollectionConfig('headlines', i18n, collectionConfig);\r\n\r\n","import React, { useRef, useEffect } from 'react';\r\nimport { noop } from 'underscore';\r\nimport PropTypes, { func } from 'prop-types';\r\nimport { mergeClasses } from '@fluentui/react-components';\r\nimport { TextAssetCollectionWithRecommendations } from '@bingads-webui-campaign-react/pmax-text-input';\r\n\r\nimport { getShortHeadlineAssetCollectionConfig } from '../../configs';\r\n\r\nexport const ShortHeadlineAssetCollection = React.memo((props) => {\r\n const {\r\n i18n,\r\n className,\r\n isOptional,\r\n placeholder,\r\n isMultipleOptions,\r\n onFocusTextAsset,\r\n onDeleteTextAsset,\r\n onApplyRecommendation,\r\n enableCopilotRecommendations,\r\n setAddNewShortHeadlinesCallback,\r\n } = props;\r\n const addNewShortHeadlineCallback = useRef(noop);\r\n const shortHeadlineAssetCollectionConfig = getShortHeadlineAssetCollectionConfig(i18n);\r\n\r\n useEffect(() => {\r\n if (setAddNewShortHeadlinesCallback) {\r\n setAddNewShortHeadlinesCallback(() => (recommendations, replaceExistingAssets) => {\r\n addNewShortHeadlineCallback.current(\r\n recommendations,\r\n replaceExistingAssets\r\n );\r\n });\r\n }\r\n }, [setAddNewShortHeadlinesCallback]);\r\n\r\n return (\r\n \r\n
\r\n ))}\r\n \r\n {tabItem(item)}\r\n
\r\n \r\n {\r\n addNewShortHeadlineCallback.current = callback;\r\n }}\r\n />\r\n
\r\n );\r\n});\r\n\r\nShortHeadlineAssetCollection.propTypes = {\r\n isOptional: PropTypes.bool,\r\n className: PropTypes.string,\r\n placeholder: PropTypes.string,\r\n enableCustomizer: PropTypes.bool,\r\n isMultipleOptions: PropTypes.bool,\r\n onResetTextAssets: PropTypes.func,\r\n i18n: PropTypes.shape({ getString: func, getLocale: func }).isRequired,\r\n enableCopilotRecommendations: PropTypes.bool,\r\n onFocusTextAsset: PropTypes.func,\r\n onDeleteTextAsset: PropTypes.func,\r\n onApplyRecommendation: PropTypes.func,\r\n onToggleTextFormatting: PropTypes.func,\r\n setAddNewShortHeadlinesCallback: PropTypes.func,\r\n};\r\n\r\nShortHeadlineAssetCollection.defaultProps = {\r\n className: '',\r\n placeholder: '',\r\n isOptional: false,\r\n enableCustomizer: false,\r\n isMultipleOptions: false,\r\n enableCopilotRecommendations: true,\r\n setAddNewShortHeadlinesCallback: null,\r\n onFocusTextAsset: noop,\r\n onDeleteTextAsset: noop,\r\n onApplyRecommendation: noop,\r\n onToggleTextFormatting: noop,\r\n onResetTextAssets: noop,\r\n};\r\n","import React, { useMemo } from 'react';\r\nimport PropTypes, { func } from 'prop-types';\r\nimport {\r\n makeStyles,\r\n mergeClasses,\r\n shorthands,\r\n tokens,\r\n} from '@fluentui/react-components';\r\n\r\nimport {\r\n ShortHeadlineAssetCollection,\r\n} from './index';\r\n\r\nconst assetName = {\r\n shortHeadline: 'ShortHeadline',\r\n};\r\n\r\nconst useTextAssetCollectionStyles = makeStyles({\r\n root: {\r\n maxWidth: '432px',\r\n },\r\n textAssetStyle: {\r\n '& .text-assets-collection-container': {\r\n width: '100%',\r\n },\r\n },\r\n textDivider: {\r\n ...shorthands.margin(tokens.spacingVerticalL, 0),\r\n },\r\n hide: {\r\n display: 'none',\r\n },\r\n});\r\n\r\nconst TextAssetCollectionWithCoPilotInternal = (props) => {\r\n const {\r\n i18n,\r\n disableCopilot,\r\n onResetTextAssets,\r\n shortHeadlineValidations,\r\n fetchRecommendationAssets,\r\n setAddNewShortHeadlinesCallback,\r\n onChangeTextAssetFormattingSection,\r\n cancelFetchRecommendationAssetsJob,\r\n } = props;\r\n\r\n const classes = useTextAssetCollectionStyles();\r\n\r\n const shortHeadlineAssetCollection = useMemo(\r\n () => (\r\n \r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nexport const TextAssetCollectionWithRecommendations = TextAssetCollectionWithRecommendationsInternal;\r\n\r\nTextAssetCollectionWithRecommendations.propTypes = {\r\n isAudienceAd: PropTypes.bool,\r\n url: PropTypes.string.isRequired,\r\n campaignId: PropTypes.string.isRequired,\r\n shortHeadline: PropTypes.string,\r\n shortHeadlineValidations: PropTypes.shape({\r\n display: PropTypes.bool,\r\n placeholder: PropTypes.string,\r\n minLength: PropTypes.number,\r\n maxLength: PropTypes.number,\r\n isMultipleOptions: PropTypes.bool,\r\n }),\r\n serverContext: PropTypes.shape({\r\n CurrentLocale: PropTypes.string.isRequired,\r\n }).isRequired,\r\n disableCopilot: PropTypes.bool.isRequired,\r\n i18n: PropTypes.shape({ getString: func, getLocale: func }).isRequired,\r\n fetchRecommendationAssets: PropTypes.func.isRequired,\r\n cancelFetchRecommendationAssetsJob: PropTypes.func.isRequired,\r\n onChangeTexts: PropTypes.func.isRequired,\r\n};\r\n\r\nTextAssetCollectionWithRecommendations.defaultProps = {\r\n isAudienceAd: false,\r\n shortHeadline: '',\r\n shortHeadlineValidations: {\r\n placeholder: '',\r\n minLength: 0,\r\n maxLength: 30,\r\n display: true,\r\n isMultipleOptions: false,\r\n },\r\n};\r\n","import React, { useCallback, useMemo } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { mergeClasses } from '@fluentui/react-components';\r\nimport { TextAssetCollectionWithRecommendations } from './components';\r\n\r\nexport const SceneWrapperTextAssetCollectionWithRecommendations = ({\r\n scene,\r\n shouldDisplay,\r\n url,\r\n disableCopilot,\r\n i18n,\r\n serverContext,\r\n campaignId,\r\n onTextListUpdate,\r\n}) => {\r\n const getTextAssets = (text, textData, index) => {\r\n let maxLength = 30;\r\n if (textData && textData.length > index) {\r\n maxLength = textData[index].maxLength || 30;\r\n }\r\n return {\r\n minLength: 0,\r\n maxLength,\r\n isMultipleOptions: false,\r\n display: true,\r\n text: text ? text.slice(0, maxLength) : '',\r\n placeholder: '',\r\n };\r\n };\r\n const metaData = useMemo(() => {\r\n if (scene && scene.updating) {\r\n return scene.updating;\r\n }\r\n return null;\r\n }, [scene]);\r\n const shortHeadline = useCallback((text, textData, index) => getTextAssets(text, textData, index), []);\r\n const textList = useMemo(() => (metaData && metaData.text) || [], [metaData]);\r\n const textDataList = useMemo(() => (metaData && metaData.textData) || [], [metaData]);\r\n\r\n return (\r\n <>\r\n {\r\n shouldDisplay && textList.length > 0 && textList.map((text, index) => (\r\n \r\n
\r\n );\r\n};\r\n\r\nEditVideoAssetsView.propTypes = {\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func,\r\n }).isRequired,\r\n aid: PropTypes.string.isRequired,\r\n cid: PropTypes.string.isRequired,\r\n oDataConfig: PropTypes.shape({}).isRequired,\r\n assetLibraryConfig: PropTypes.shape({}).isRequired,\r\n onTextListChange: PropTypes.func.isRequired,\r\n onChangeImage: PropTypes.func.isRequired,\r\n onImageUpdated: PropTypes.func.isRequired,\r\n onLogoUpdated: PropTypes.func.isRequired,\r\n scenes: PropTypes.arrayOf(PropTypes.shape({})).isRequired,\r\n selectedSceneId: PropTypes.number.isRequired,\r\n onChangeLogo: PropTypes.func.isRequired,\r\n preferenceService: PropTypes.shape({}).isRequired,\r\n serverContext: PropTypes.shape({}).isRequired,\r\n perfMarker: PropTypes.shape({}).isRequired,\r\n permissions: PropTypes.shape({}).isRequired,\r\n recommendedAssets: PropTypes.shape({\r\n ImageAssets: PropTypes.arrayOf(PropTypes.shape({\r\n Url: PropTypes.string,\r\n })),\r\n Logo: PropTypes.oneOfType([\r\n PropTypes.string,\r\n PropTypes.arrayOf(PropTypes.string),\r\n ]),\r\n }).isRequired,\r\n isLoadingRecommendedAssets: PropTypes.bool.isRequired,\r\n brandKit: PropTypes.shape({\r\n images: PropTypes.arrayOf(PropTypes.shape({\r\n Url: PropTypes.string,\r\n })),\r\n logos: PropTypes.arrayOf(PropTypes.shape({\r\n Url: PropTypes.string,\r\n })),\r\n }).isRequired,\r\n isLoadingBrandKit: PropTypes.bool.isRequired,\r\n finalUrl: PropTypes.string,\r\n};\r\n\r\nEditVideoAssetsView.defaultProps = {\r\n finalUrl: '',\r\n};\r\n","import { makeStyles, shorthands, tokens } from '@fluentui/react-components';\r\n\r\nexport const useStyles = makeStyles({\r\n styleGuideContainer: {\r\n marginLeft: '10px',\r\n marginRight: '10px',\r\n marginTop: '10px',\r\n marginBottom: '10px',\r\n display: 'flex',\r\n flexDirection: 'column',\r\n },\r\n styleGuideTitle: {\r\n fontWeight: tokens.fontWeightBold,\r\n paddingBottom: '5px',\r\n },\r\n styleColorTitle: {\r\n paddingTop: '5px',\r\n paddingBotton: '5px',\r\n fontWeight: tokens.fontWeightSemibold,\r\n },\r\n colorPalettes: {\r\n display: 'flex',\r\n flexDirection: 'column',\r\n ...shorthands.gap(tokens.spacingVerticalM),\r\n ...shorthands.margin(tokens.spacingVerticalM, 0, 0, 0),\r\n },\r\n item: {\r\n height: '55px',\r\n width: '55px',\r\n backgroundColor: tokens.colorNeutralStencil1,\r\n },\r\n textDivider: {\r\n ...shorthands.margin(tokens.spacingVerticalL, 0),\r\n },\r\n containerWrapper: {\r\n display: 'flex',\r\n flexDirection: 'column',\r\n justifyContent: 'center',\r\n alignItems: 'center',\r\n marginBottom: tokens.spacingVerticalL,\r\n },\r\n container: {\r\n width: '100%',\r\n ...shorthands.flex(1),\r\n ...shorthands.padding(tokens.spacingVerticalS, 0),\r\n },\r\n header: {\r\n display: 'flex',\r\n columnGap: tokens.spacingHorizontalXS,\r\n alignItems: 'center',\r\n ...shorthands.padding(tokens.spacingVerticalL, tokens.spacingHorizontalL),\r\n },\r\n content: {\r\n ...shorthands.padding(tokens.spacingVerticalL, tokens.spacingHorizontalL),\r\n },\r\n fontSelect: {\r\n minWidth: 'auto',\r\n maxWidth: '100%',\r\n '& > input': {\r\n maxWidth: '120px',\r\n },\r\n },\r\n fontWeightSelect: {\r\n minWidth: 'auto',\r\n maxWidth: '100%',\r\n '& > input': {\r\n maxWidth: '120px',\r\n },\r\n },\r\n fontContainer: {\r\n display: 'grid',\r\n gridTemplateColumns: 'repeat(auto-fit, minmax(172px, 1fr))',\r\n gridGap: tokens.spacingHorizontalS,\r\n },\r\n contentDivider: {\r\n display: 'inline-flex',\r\n marginTop: tokens.spacingVerticalXL,\r\n },\r\n});\r\n\r\nexport const getskeletonStyles = makeStyles({\r\n row: {\r\n display: 'flex',\r\n ...shorthands.gap('8px'),\r\n flexWrap: 'wrap',\r\n },\r\n item: {\r\n height: '55px',\r\n width: '55px',\r\n backgroundColor: tokens.colorNeutralStencil1,\r\n },\r\n});\r\n","import React, { useMemo } from 'react';\r\nimport {\r\n FontsFamilySelector,\r\n FontsWeightSelector,\r\n} from '@bingads-webui-campaign-react/fonts-selector';\r\nimport PropTypes from 'prop-types';\r\nimport { useStyles } from './style';\r\n\r\nconst overrideFontWeights = [\r\n { key: 'Normal', text: _TL_('Normal') },\r\n { key: 'Bold', text: _TL_('Bold') },\r\n];\r\n\r\nexport const FontEditor = ({\r\n i18n,\r\n onChangeFont,\r\n onChangeWeight,\r\n fontsState,\r\n}) => {\r\n const classes = useStyles();\r\n const currentFont = useMemo(() => fontsState && fontsState.updating && fontsState.updating.font, [fontsState]);\r\n const currentWeight = useMemo(() => fontsState && fontsState.updating && fontsState.updating.fontWeight, [fontsState]);\r\n\r\n return (\r\n \r\n
\r\n {displayImagePicker && (\r\n \r\n \r\n {hasLogos && (\r\n <>\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n {currentSceneLogos.map((logo, index) => (\r\n
\r\n \r\n onReplacePreview(index, ev)}\r\n recommendedLoadingText={i18n.getString(_TL_('Loading'))}\r\n title={i18n.getString(_TL_('Logo'))}\r\n helpTopic=\"pop_BA_VideoTemplates_Logo\"\r\n helpLabel=\"Learn more about logos\"\r\n recommendationTitle={i18n.getString(_TL_('Recommended logos'))}\r\n onSelectRecommendedImage={onUpdateImageFromRecommendations(index)}\r\n onAddRecommendedImagefromPanel={onUpdateImageFromRecommendations(index)}\r\n showViewAllInHeader\r\n hideEditPreviewBtn\r\n />\r\n
\r\n ))\r\n }\r\n \r\n
\r\n \r\n )}\r\n {\r\n hasImages && (\r\n <>\r\n \r\n {currentSceneImages.map((sceneImage, index) => (\r\n
\r\n \r\n onReplacePreview(index, ev)}\r\n recommendedLoadingText={i18n.getString(_TL_('Loading'))}\r\n title={i18n.getString(_TL_('Images'))}\r\n helpTopic=\"pop_BA_VideoTemplates_Images\"\r\n helpLabel=\"Learn more about images\"\r\n recommendationTitle={i18n.getString(_TL_('Recommended images'))}\r\n onSelectRecommendedImage={onUpdateImageFromRecommendations(index)}\r\n onAddRecommendedImagefromPanel={onUpdateImageFromRecommendations(index)}\r\n showViewAllInHeader\r\n hideEditPreviewBtn\r\n />\r\n
\r\n ))\r\n }\r\n \r\n
\r\n \r\n )}\r\n \r\n {\r\n scenes && scenes.map((scene, idx) => (\r\n
\r\n \r\n
\r\n );\r\n};\r\n\r\nFontEditor.propTypes = {\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func,\r\n }).isRequired,\r\n fontsState: PropTypes.shape({\r\n updating: PropTypes.shape({\r\n font: PropTypes.string,\r\n fontWeight: PropTypes.string,\r\n }),\r\n }).isRequired,\r\n onChangeFont: PropTypes.func.isRequired,\r\n onChangeWeight: PropTypes.func.isRequired,\r\n};\r\n\r\n","import _ from 'underscore';\r\nimport Promise from 'bluebird';\r\n\r\nexport const ViewName = {\r\n AssetsView: 'edit-video-assets-view',\r\n StyleView: 'edit-video-style-view',\r\n AudioView: 'edit-video-audio-view',\r\n};\r\n\r\nexport const ViewTitle = {\r\n [ViewName.StyleView]: 'Video style guide',\r\n [ViewName.AudioView]: 'Audio',\r\n};\r\n\r\nexport const ColorTypeEnum = {\r\n BackgroundColor: 'backgroundColor',\r\n TextColor: 'textColor',\r\n};\r\n\r\nconst keyframeTemplateList = [\r\n {\r\n TemplateId: '00000001-0000-0000-0000-000000000000',\r\n TemplateName: 'Template 8 Scene 1',\r\n Version: '1.0',\r\n Width: 1280,\r\n Height: 720,\r\n TemplateFileName: 'template8_keyframe1.html',\r\n Image: [\r\n {\r\n AspectRatio: '16:9',\r\n MinHeight: 360,\r\n },\r\n ],\r\n Text: [\r\n {\r\n MaxLengthInChar: 20,\r\n },\r\n {\r\n MaxLengthInChar: 36,\r\n },\r\n ],\r\n },\r\n {\r\n TemplateId: '00000001-0000-0000-0000-000000000001',\r\n TemplateName: 'Template 8 Scene 2',\r\n Version: '1.0',\r\n Width: 1280,\r\n Height: 720,\r\n TemplateFileName: 'template8_keyframe2.html',\r\n Image: [\r\n {\r\n AspectRatio: '16:9',\r\n MinHeight: 360,\r\n },\r\n ],\r\n Text: [\r\n {\r\n MaxLengthInChar: 20,\r\n },\r\n {\r\n MaxLengthInChar: 36,\r\n },\r\n ],\r\n },\r\n {\r\n TemplateId: '00000001-0000-0000-0000-000000000002',\r\n TemplateName: 'Template 8 Scene 3',\r\n Version: '1.0',\r\n Width: 1280,\r\n Height: 720,\r\n TemplateFileName: 'template8_keyframe3.html',\r\n Image: [\r\n {\r\n AspectRatio: '16:9',\r\n MinHeight: 360,\r\n },\r\n ],\r\n Text: [\r\n {\r\n MaxLengthInChar: 25,\r\n },\r\n {\r\n MaxLengthInChar: 40,\r\n },\r\n ],\r\n },\r\n];\r\n\r\nconst getActiveTemplate = templateId => _.findWhere(keyframeTemplateList, { TemplateId: templateId });\r\n\r\nexport const getTextSizeLimitation = (templateId) => {\r\n const activeTemplate = getActiveTemplate(templateId);\r\n if (activeTemplate && activeTemplate.Text) {\r\n return activeTemplate.Text.map(text => text.MaxLengthInChar);\r\n }\r\n return [];\r\n};\r\n\r\nexport const getImageSizeLimitation = (templateId) => {\r\n const activeTemplate = getActiveTemplate(templateId);\r\n if (activeTemplate && activeTemplate.Image) {\r\n return activeTemplate.Image.map((image) => {\r\n const minHeight = image.MinHeight;\r\n const aspectRatio = image.AspectRatio.split(':');\r\n const minWidth = minHeight * (aspectRatio[0] / aspectRatio[1]);\r\n\r\n return [minWidth, minHeight];\r\n });\r\n }\r\n return [];\r\n};\r\n\r\nexport const MaxBusinessNameLength = 25;\r\n\r\nexport const loadImagePromise = (src, mock) => {\r\n const image = new Image();\r\n image.src = src;\r\n return new Promise((resolve) => {\r\n image.onload = () => {\r\n // if the actual image is 404, it will return a placeholder image which width and height are 80\r\n // todo: investigate if there is a better way to handle this\r\n if (image.width === 80 && image.height === 80 && !mock) {\r\n resolve('failed');\r\n } else {\r\n resolve('success');\r\n }\r\n };\r\n image.onerror = () => {\r\n if (!mock) {\r\n resolve('failed');\r\n } else {\r\n resolve('success');\r\n }\r\n };\r\n });\r\n};\r\n","import React, { useMemo, useCallback } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { AdsStudioDisplayColorPicker } from '@bingads-webui-campaign-react/display-ads-editor';\r\nimport { mergeClasses } from '@fluentui/react-components';\r\nimport { useStyles } from './style';\r\nimport { ColorTypeEnum } from '../../util';\r\n\r\nexport const ColorEditor = ({\r\n i18n,\r\n isLoading,\r\n onPalettesUpdated,\r\n brandKit,\r\n paletteData,\r\n palettesState,\r\n}) => {\r\n const classes = useStyles();\r\n const backgroundPalette = useMemo(() => (paletteData && paletteData.length &&\r\n paletteData.filter(color =>\r\n color.Name === ColorTypeEnum.BackgroundColor || color.isBrandKitColor)) || [], [paletteData]);\r\n const textPalette = useMemo(() => (paletteData && paletteData.length &&\r\n paletteData.filter(color =>\r\n color.Name === ColorTypeEnum.TextColor || color.isBrandKitColor)) || [], [paletteData]);\r\n\r\n const selectedColor = useCallback((colorType) => {\r\n const color = palettesState && palettesState.updating && palettesState.updating.find(c => c.Name === colorType);\r\n return color ? color.HexCode : '';\r\n }, [palettesState]);\r\n const maxColors = useMemo(() => (brandKit && brandKit.palettes && brandKit.palettes.length + 1) || 1, [brandKit]);\r\n\r\n const onDeleteColor = useCallback((ev, type) => {\r\n const { colorid } = ev.currentTarget.dataset;\r\n let data = Array.from((paletteData || []));\r\n data = data.filter(color => color.Name !== colorid);\r\n if (data.length > 0 && data[0].HexCode) {\r\n onPalettesUpdated((data[0]).HexCode, type);\r\n }\r\n }, [onPalettesUpdated, paletteData]);\r\n\r\n const onUpdate = colorType => (color, colorObj) => {\r\n onPalettesUpdated(colorObj.str, colorType);\r\n };\r\n\r\n return (\r\n \r\n
\r\n {i18n.getString(_TL_('Font'))}
\r\n \r\n
\r\n {i18n.getString(_TL_('Font weight'))}
\r\n \r\n
\r\n );\r\n};\r\n\r\nColorEditor.propTypes = {\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func,\r\n }).isRequired,\r\n isLoading: PropTypes.bool,\r\n palettesState: PropTypes.shape({\r\n updating: PropTypes.arrayOf(PropTypes.shape({})),\r\n }).isRequired,\r\n onPalettesUpdated: PropTypes.func.isRequired,\r\n brandKit: PropTypes.shape({\r\n palettes: PropTypes.arrayOf(PropTypes.shape({})),\r\n }).isRequired,\r\n paletteData: PropTypes.arrayOf(PropTypes.shape({\r\n Name: PropTypes.string,\r\n HexCode: PropTypes.string,\r\n isBrandKitColor: PropTypes.bool,\r\n })).isRequired,\r\n};\r\n\r\nColorEditor.defaultProps = {\r\n isLoading: false,\r\n};\r\n\r\n","import React, { useCallback, useMemo } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { isEmpty } from 'underscore';\r\nimport { Divider } from '@fluentui/react-components';\r\nimport { FontEditor } from './font-editor';\r\nimport { ColorEditor } from './color-editor';\r\nimport { useStyles } from './style';\r\n\r\n\r\nexport const EditVideoStyleView = ({\r\n i18n,\r\n palettesState,\r\n onPalettesUpdated,\r\n fontsState,\r\n onFontsUpdated,\r\n brandKit,\r\n}) => {\r\n const classes = useStyles();\r\n\r\n const paletteData = useMemo(() => {\r\n let finalPalettes = [];\r\n if (!isEmpty(brandKit)) {\r\n const brandKitPalettes = brandKit.palettes;\r\n const mappedPalettes = brandKitPalettes.map(palette => ({ ...palette, isBrandKitColor: true }));\r\n finalPalettes.push(...mappedPalettes);\r\n palettesState && palettesState.updating && palettesState.updating.forEach((color) => {\r\n if (!brandKit.palettes.some(c => c.HexCode === color.HexCode)) {\r\n finalPalettes.push(color);\r\n }\r\n });\r\n } else {\r\n finalPalettes = palettesState;\r\n }\r\n return finalPalettes;\r\n }, [palettesState, brandKit]);\r\n\r\n const onChangeFont = useCallback((font) => {\r\n const newState = {\r\n ...fontsState,\r\n updating: { ...fontsState.updating, font },\r\n };\r\n onFontsUpdated(newState);\r\n }, [fontsState, onFontsUpdated]);\r\n\r\n const onChangeWeight = (fontWeight) => {\r\n const newState = {\r\n ...fontsState,\r\n updating: { ...fontsState.updating, fontWeight },\r\n };\r\n onFontsUpdated(newState);\r\n };\r\n\r\n return (\r\n \r\n onDeleteColor(ev, ColorTypeEnum.BackgroundColor)}\r\n helpTopic=\"pop_BA_VideoTemplates_BackgroundColor\"\r\n helpLabel=\"Learn more about background colors\"\r\n />\r\n
\r\n \r\n onDeleteColor(ev, ColorTypeEnum.TextColor)}\r\n helpTopic=\"pop_BA_VideoTemplates_TextColor\"\r\n helpLabel=\"Learn more about font colors\"\r\n />\r\n
\r\n \r\n
\r\n );\r\n};\r\n\r\nEditVideoStyleView.propTypes = {\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func,\r\n }).isRequired,\r\n palettesState: PropTypes.shape({\r\n updating: PropTypes.arrayOf(PropTypes.shape({\r\n Name: PropTypes.string,\r\n Colors: PropTypes.arrayOf(PropTypes.string),\r\n })),\r\n }).isRequired,\r\n onPalettesUpdated: PropTypes.func.isRequired,\r\n fontsState: PropTypes.shape({\r\n updating: PropTypes.shape({\r\n font: PropTypes.string,\r\n fontWeight: PropTypes.string,\r\n }),\r\n }).isRequired,\r\n onFontsUpdated: PropTypes.func.isRequired,\r\n brandKit: PropTypes.shape({\r\n palettes: PropTypes.arrayOf(PropTypes.shape({\r\n Name: PropTypes.string,\r\n Colors: PropTypes.arrayOf(PropTypes.string),\r\n })),\r\n }).isRequired,\r\n};\r\n\r\nEditVideoStyleView.defaultProps = {\r\n};\r\n","import { makeStyles } from '@fluentui/react-components';\r\n\r\nexport const useStyles = makeStyles({\r\n audioGuideContainer: {\r\n marginLeft: '10px',\r\n marginRight: '10px',\r\n marginTop: '10px',\r\n marginLBottom: '10px',\r\n },\r\n audioGuideTitle: {\r\n fontWeight: 'bold',\r\n paddingBottom: '5px',\r\n },\r\n audioMusicTitle: {\r\n paddingTop: '5px',\r\n paddingBottom: '5px',\r\n },\r\n audioMusicTitleContainer: {\r\n display: 'flex',\r\n alignItems: 'center',\r\n },\r\n audioMusicSelect: {\r\n display: 'flex',\r\n justifyContent: 'space-between',\r\n },\r\n audioMusicContainer: {\r\n marginTop: '10px',\r\n marginBottom: '10px',\r\n },\r\n});\r\n","/* eslint-disable jsx-a11y/media-has-caption */\r\nimport React, { useState, useEffect, useCallback, useRef, useMemo } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { Combobox, Option, useId, Button } from '@fluentui/react-components';\r\nimport { Overlay } from '@bingads-webui-react/fabric-control';\r\nimport { AssetLibrarySpinner } from '@bingads-webui-campaign-react/asset-library-spinner';\r\nimport { PlayRegular, PauseRegular } from '@fluentui/react-icons';\r\nimport { withCopilotDomainDataService } from '@bingads-webui-campaign-react/copilot-domain-data-service';\r\nimport { HelpPopupInline } from '@bingads-webui-react/help-popup';\r\n\r\nimport { useStyles } from './style';\r\n\r\nexport const getLocalizedAudioName = (key, i18n) => {\r\n const localizedAudioNames = {\r\n 'chill_calm_river_msft_mstr.aac': i18n.getString(_TL_('Calm river (chill)')),\r\n 'chill_In_A_Dream_MSFT_MSTR.aac': i18n.getString(_TL_('In a dream (chill)')),\r\n 'chill_keep_it_moving_msft_mstr.aac': i18n.getString(_TL_('Soft moves (chill)')),\r\n 'chill_Open_Field_MSFT_MSTR.aac': i18n.getString(_TL_('Open field (chill)')),\r\n 'chill_Rain_In_Japan_MSFT_MSTR.aac': i18n.getString(_TL_('Rain in Japan (chill)')),\r\n 'chill_relaxation_msft_mstr.aac': i18n.getString(_TL_('Relaxation (chill)')),\r\n 'chill_summer_breeze_msft_mstr.aac': i18n.getString(_TL_('Summer breeze (chill)')),\r\n 'chill_sunshine_msft_mstr.aac': i18n.getString(_TL_('Sunshine (chill)')),\r\n 'chill_Supernova_MSFT_MSTR.aac': i18n.getString(_TL_('Supernova (chill)')),\r\n 'chill_Waves_MSFT_MSTR.aac': i18n.getString(_TL_('Waves (chill)')),\r\n 'cinematic_disturbia_msft_mstr.aac': i18n.getString(_TL_('Disturbia (cinematic)')),\r\n 'cinematic_full_throttle_msft_mstr.aac': i18n.getString(_TL_('Full throttle (cinematic)')),\r\n 'cinematic_tackle_it_msft_mstr.aac': i18n.getString(_TL_('Ready for action (cinematic)')),\r\n 'energetic_all_hyped_up_msft_mstr.aac': i18n.getString(_TL_('All hyped up (energetic)')),\r\n 'energetic_beach_party_msft_mstr.aac': i18n.getString(_TL_('Beach party (energetic)')),\r\n 'energetic_Bring_Up_The_Energy_MSFT_MSTR.aac': i18n.getString(_TL_('Bring the energy (energetic)')),\r\n 'energetic_By_The_Shoreline_MSFT_MSTR.aac': i18n.getString(_TL_('Daytime fun (energetic)')),\r\n 'energetic_Feelin\\'_Fresh_MSFT_MSTR.aac': i18n.getString(_TL_('Feeling fresh (energetic)')),\r\n 'energetic_Get_Excited_MSFT_MSTR.aac': i18n.getString(_TL_('Get excited (energetic)')),\r\n 'energetic_get_this_msft_mstr.aac': i18n.getString(_TL_('Positive vibes (energetic)')),\r\n 'energetic_glitter_msft_mstr.aac': i18n.getString(_TL_('Get moving (energetic)')),\r\n 'energetic_ice_tea_msft_mstr.aac': i18n.getString(_TL_('Dance to the rhythm (energetic)')),\r\n 'energetic_Pump_It_Up_MSFT_MSTR.aac': i18n.getString(_TL_('Pump it up (energetic)')),\r\n 'energetic_right_away_msft_mstr.aac': i18n.getString(_TL_('Gaining speed (energetic)')),\r\n 'fun_all_night_msft_mstr.aac': i18n.getString(_TL_('All night (fun)')),\r\n 'fun_backseat_msft_mstr.aac': i18n.getString(_TL_('Cruising (fun)')),\r\n 'fun_Block_Party_MSFT_MSTR.aac': i18n.getString(_TL_('Block party (fun)')),\r\n 'fun_Chill_And_Wavey_MSFT_MSTR.aac': i18n.getString(_TL_('Waves (fun)')),\r\n 'fun_Cloud_Walk_MSFT_MSTR.aac': i18n.getString(_TL_('Walking on clouds (fun)')),\r\n 'fun_Fearless_Funk_MSFT_MSTR.aac': i18n.getString(_TL_('Summertime beats (fun)')),\r\n 'fun_get_going_msft_mstr.aac': i18n.getString(_TL_('Groove with it (fun)')),\r\n 'fun_go_hard_msft_mstr.aac': i18n.getString(_TL_('Bliss (fun)')),\r\n 'fun_Laid_Back_Vibe_MSFT_MSTR.aac': i18n.getString(_TL_('Catch the sun (fun)')),\r\n 'fun_Liquid_MSFT_MSTR.aac': i18n.getString(_TL_('Cool as water (fun)')),\r\n 'fun_Spectra_MSFT_MSTR.aac': i18n.getString(_TL_('Up for anything (fun)')),\r\n 'fun_spring_city_msft_mstr.aac': i18n.getString(_TL_('Spring time (fun)')),\r\n 'fun_The_Bounce_MSFT_MSTR.aac': i18n.getString(_TL_('Bounce step (fun)')),\r\n 'inspiring_anodized_msft_mstr.aac': i18n.getString(_TL_('Looking to the future (inspiring)')),\r\n 'inspiring_Awakenings_MSFT_MSTR.aac': i18n.getString(_TL_('Awakenings (inspiring)')),\r\n 'inspiring_Closed_Circuits_MSFT_MSTR.aac': i18n.getString(_TL_('Open circuits (inspiring)')),\r\n 'inspiring_Cutting_Edge_MSFT_MSTR.aac': i18n.getString(_TL_('Innovation (inspiring)')),\r\n 'inspiring_Driving_Force_MSFT_MSTR.aac': i18n.getString(_TL_('Driving force (inspiring)')),\r\n 'inspiring_happy_place_msft_mstr.aac': i18n.getString(_TL_('Happy place (inspiring)')),\r\n 'inspiring_in_the_sky_msft_mstr.aac': i18n.getString(_TL_('Catching air (inspiring)')),\r\n 'inspiring_Isotope_MSFT_MSTR.aac': i18n.getString(_TL_('Journeying (inspiring)')),\r\n 'inspiring_look_around_msft_mstr.aac': i18n.getString(_TL_('Taking in the view')),\r\n 'inspiring_Morning_Coffee_MSFT_MSTR.aac': i18n.getString(_TL_('Morning coffee (inspiring)')),\r\n 'inspiring_sunshine_in_my_mind_msft_mstr.aac': i18n.getString(_TL_('Sunshine all the time (inspiring)')),\r\n 'inspiring_Tinkering_MSFT_MSTR.aac': i18n.getString(_TL_('Spring cleaning (inspiring)')),\r\n 'sentimental_homecoming_msft_mstr.aac': i18n.getString(_TL_('Homecoming (sentimental)')),\r\n 'sentimental_not_guilty_msft_mstr.aac': i18n.getString(_TL_('Know you\\'re great (sentimental)')),\r\n 'sentimental_rising_star_msft_mstr.aac': i18n.getString(_TL_('Stargazing (sentimental)')),\r\n };\r\n\r\n return localizedAudioNames[key] || key;\r\n};\r\n\r\nconst EditVideoAudioViewImpl = ({\r\n i18n,\r\n copilotDomainDataService,\r\n audioState,\r\n setAudioState,\r\n}) => {\r\n const selectId = useId();\r\n const classes = useStyles();\r\n\r\n const [selectedValue, setSelectedValue] = useState();\r\n const [isPageLoading, setIsPageLoading] = useState(true);\r\n const [audioList, setAudioList] = useState([]);\r\n const [isPlaying, setIsPlaying] = useState(false);\r\n const audioRef = useRef(null);\r\n\r\n const audioSrc = useMemo(() => audioState && audioState.updating && audioState.updating.fileName, [audioState]);\r\n const audioName = useMemo(() => audioState && audioState.updating && audioState.updating.audioName, [audioState]);\r\n\r\n const togglePlayPause = () => {\r\n if (isPlaying) {\r\n audioRef.current.pause();\r\n } else {\r\n audioRef.current.play();\r\n }\r\n setIsPlaying(!isPlaying);\r\n };\r\n\r\n const formatResponse = useCallback((response) => {\r\n if (!response || !response.Data || !response.Data.Audio) {\r\n return [];\r\n }\r\n\r\n return response.Data.Audio.map(item => ({\r\n key: item.Url,\r\n text: getLocalizedAudioName(item.AudioName, i18n),\r\n }));\r\n }, []);\r\n\r\n const getAudioObjectFromList = useCallback((key) => {\r\n if (!audioList || audioList.length === 0) {\r\n return null;\r\n }\r\n return audioList.find(item => item.key === key);\r\n });\r\n\r\n const handleChange = (event, data) => {\r\n const audioObject = getAudioObjectFromList(data.optionValue);\r\n if (audioObject) {\r\n setSelectedValue(data.optionText);\r\n setAudioState(prev => ({\r\n ...prev,\r\n updating: {\r\n ...prev.updating,\r\n fileName: audioObject.key,\r\n audioName: audioObject.text,\r\n },\r\n }));\r\n }\r\n\r\n if (isPlaying) {\r\n audioRef.current.pause();\r\n audioRef.current.load();\r\n audioRef.current.play();\r\n }\r\n };\r\n\r\n const fetchAudioList = useCallback(async () => {\r\n const { response, error } = await copilotDomainDataService.getAudioList();\r\n if (error) {\r\n setIsPageLoading(false);\r\n return;\r\n }\r\n const formattedList = formatResponse(response);\r\n setAudioList(formattedList);\r\n if (formattedList.length > 0) {\r\n setSelectedValue(getLocalizedAudioName(audioName, i18n) || formattedList[0].text);\r\n }\r\n setIsPageLoading(false);\r\n }, [copilotDomainDataService, formatResponse]);\r\n\r\n useEffect(() => {\r\n fetchAudioList();\r\n }, [fetchAudioList]);\r\n\r\n return (\r\n {i18n.getString(_TL_('Edit your video\\'s style '))}
\r\n \r\n {isPageLoading && (\r\n \r\n \r\n )}\r\n
\r\n );\r\n};\r\n\r\n\r\nEditVideoAudioViewImpl.propTypes = {\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func,\r\n }).isRequired,\r\n copilotDomainDataService: PropTypes.shape({\r\n getAudioList: PropTypes.func,\r\n }).isRequired,\r\n audioState: PropTypes.string.isRequired,\r\n setAudioState: PropTypes.func.isRequired,\r\n};\r\n\r\nEditVideoAudioViewImpl.defaultProps = {\r\n};\r\n\r\nexport const EditVideoAudioView = withCopilotDomainDataService(EditVideoAudioViewImpl);\r\n\r\n","import { makeStyles, tokens, shorthands } from '@fluentui/react-components';\r\n\r\nexport const useStyles = makeStyles({\r\n scenePreviewContainer: {\r\n display: 'flex',\r\n height: '100%',\r\n justifyContent: 'center',\r\n alignItems: 'center',\r\n ...shorthands.padding('0px', tokens.spacingHorizontalXXXL, '0px', tokens.spacingHorizontalXXXL),\r\n },\r\n scenePreviewImage: {\r\n maxWidth: '100%',\r\n maxHeight: '450px',\r\n ...shorthands.borderRadius('8px'),\r\n },\r\n});\r\n","import React, { useMemo } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { mergeClasses } from '@fluentui/react-components';\r\nimport { useStyles } from './style';\r\n\r\nexport const ScenePreview = ({ scenes, selectedSceneId }) => {\r\n const currentScene = useMemo(() => scenes[selectedSceneId], [scenes, selectedSceneId]);\r\n const { keyFrame } = (currentScene && currentScene.effective) || { keyFrame: { url: '' } };\r\n const classes = useStyles();\r\n return (\r\n {i18n.getString(_TL_('Choose audio for your video'))}
\r\n \r\n
\r\n \r\n
\r\n {i18n.getString(_TL_('Music'))}
\r\n \r\n \r\n {!isPageLoading && audioList.length > 0 && audioList.map(option => (\r\n \r\n ))}\r\n \r\n
\r\n \r\n {/* if needed we can use play/pause controls as well */}\r\n {/* */}\r\n \r\n
\r\n );\r\n};\r\n\r\nScenePreview.propTypes = {\r\n scenes: PropTypes.arrayOf(PropTypes.shape({})).isRequired,\r\n selectedSceneId: PropTypes.number.isRequired,\r\n};\r\n","import { makeStyles, tokens, shorthands } from '@fluentui/react-components';\r\n\r\nexport const useStyles = makeStyles({\r\n storyBoardView: {\r\n display: 'flex',\r\n gap: '16px',\r\n height: '100%',\r\n minWidth: 'max-content',\r\n borderRadius: '10px',\r\n ...shorthands.padding(tokens.spacingVerticalMNudge),\r\n backgroundColor: '#FFFFFF',\r\n },\r\n templateContainer: {\r\n display: 'flex',\r\n flexDirection: 'column',\r\n justifyContent: 'space-around',\r\n width: '152px',\r\n backgroundColor: '#F0F0F0',\r\n borderRadius: '10px',\r\n paddingLeft: '10px',\r\n },\r\n templateThumbnail: {\r\n maxWidth: '125px',\r\n height: 'auto',\r\n borderRadius: '10px',\r\n fontSize: '14px',\r\n },\r\n templateText: {\r\n color: tokens.colorNeutralForeground3,\r\n fontSize: '14px',\r\n },\r\n\r\n scenesContainer: {\r\n flex: 1,\r\n display: 'flex',\r\n flexDirection: 'column',\r\n gap: '16px',\r\n },\r\n\r\n sceneContainer: {\r\n display: 'flex',\r\n flexDirection: 'row',\r\n columnGap: '8px',\r\n },\r\n\r\n sceneTitle: {\r\n fontSize: '16px',\r\n fontWeight: '500',\r\n },\r\n\r\n thumbnailsRow: {\r\n display: 'flex',\r\n },\r\n sceneItem: {\r\n display: 'flex',\r\n marginTop: '5px',\r\n marginLeft: '5px',\r\n flexDirection: 'column',\r\n maxWidth: '125px',\r\n height: 'auto',\r\n '& .scene-decorator': {\r\n borderRadius: '10px',\r\n '& .thumbnail': {\r\n overflow: 'hidden',\r\n '&.selected': {\r\n outlineColor: '#0078d4',\r\n outlineStyle: 'solid',\r\n },\r\n padding: 1,\r\n },\r\n },\r\n },\r\n sceneThumbnail: {\r\n height: '88px',\r\n borderRadius: '10px',\r\n marginBottom: '0px',\r\n },\r\n sceneNumber: {\r\n marginBottom: '16px',\r\n '& span': {\r\n verticalAlign: 'middle',\r\n lineHeight: '12px',\r\n },\r\n },\r\n audioBar: {\r\n display: 'flex',\r\n borderRadius: '10px',\r\n width: '100%',\r\n height: '28px',\r\n color: 'white',\r\n paddingTop: '2px',\r\n paddingLeft: '5px',\r\n },\r\n navigationContainer: {\r\n display: 'grid',\r\n marginLeft: '10px',\r\n },\r\n});\r\n","import React, { useContext, useCallback } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport classNames from 'classnames';\r\nimport { mergeClasses } from '@fluentui/react-components';\r\nimport {\r\n Text,\r\n} from '@bingads-webui-react/fabric-control';\r\nimport { keyCode } from '@bingads-webui/keycode';\r\nimport { I18nContext } from '@bingads-webui-react/i18n-context';\r\nimport { HelpPopupInline } from '@bingads-webui-react/help-popup';\r\nimport { useStyles } from './style';\r\n\r\n\r\nconst Title = () => {\r\n const i18n = useContext(I18nContext);\r\n return (\r\n \r\n {i18n.getString(_TL_('Scenes'))} \r\n
\r\n );\r\n};\r\n\r\nconst Scene = ({\r\n scene, sceneId, onSceneSelected, selectedSceneId,\r\n}) => {\r\n const classes = useStyles();\r\n const clickFunc = useCallback(() => {\r\n onSceneSelected({ scene, id: sceneId });\r\n }, [onSceneSelected, scene, sceneId]);\r\n\r\n const onKeyDown = useCallback((ev) => {\r\n if (ev.keyCode === keyCode.Enter) {\r\n clickFunc();\r\n }\r\n }, [clickFunc]);\r\n\r\n const {\r\n keyFrame,\r\n } = scene;\r\n\r\n const isSelected = sceneId === selectedSceneId;\r\n\r\n return (\r\n \r\n \r\n
\r\n \r\n 
\r\n
\r\n \r\n {`${sceneId + 1}`} \r\n
\r\n \r\n );\r\n};\r\n\r\nScene.propTypes = {\r\n scene: PropTypes.shape({\r\n keyFrame: PropTypes.shape({}).isRequired,\r\n }).isRequired,\r\n onSceneSelected: PropTypes.func.isRequired,\r\n selectedSceneId: PropTypes.number.isRequired,\r\n sceneId: PropTypes.number.isRequired,\r\n};\r\n\r\nexport const ScenePickerView = ({\r\n scenes, onSceneSelected, selectedSceneId,\r\n}) => {\r\n const classes = useStyles();\r\n\r\n return (\r\n \r\n
\r\n );\r\n};\r\n\r\nScenePickerView.propTypes = {\r\n scenes: PropTypes.arrayOf(PropTypes.shape({})).isRequired,\r\n onSceneSelected: PropTypes.func.isRequired,\r\n selectedSceneId: PropTypes.number.isRequired,\r\n};\r\n\r\nScenePickerView.defaultProps = {};\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { Text, mergeClasses } from '@fluentui/react-components';\r\nimport { MusicNote2Filled } from '@fluentui/react-icons';\r\nimport { useStyles } from './style';\r\nimport { ScenePickerView } from './scene-picker';\r\nimport audioWaveImage from '../../media/audio-wave.svg';\r\nimport { getLocalizedAudioName } from '../audio-editor';\r\n\r\nconst TemplateContainer = ({ templateDetail, i18n, classes }) => {\r\n if (!templateDetail || !templateDetail.TemplateThumbnailUrl || !templateDetail.TemplateName) {\r\n return null;\r\n }\r\n\r\n return (\r\n \r\n {scenes.map(scene => (
\r\n \r\n {i18n.getString(_TL_('Selected Template'))} \r\n 
\r\n
\r\n );\r\n};\r\n\r\nTemplateContainer.propTypes = {\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func,\r\n }).isRequired,\r\n template: PropTypes.shape({\r\n url: PropTypes.string.isRequired,\r\n title: PropTypes.string.isRequired,\r\n timestamp: PropTypes.string.isRequired,\r\n }).isRequired,\r\n};\r\n\r\nconst AudioBar = ({ videoMetadata, i18n }) => {\r\n const classes = useStyles();\r\n const audio = videoMetadata.template && videoMetadata.template.audio;\r\n const audioName = audio && audio.audioName;\r\n const audioCategory = audio && audio.category;\r\n\r\n return (\r\n \r\n
\r\n {templateDetail.LocalizedTemplateName || templateDetail.TemplateName}
\r\n {i18n.getString(_TL_('Duration: {{seconds}} seconds'), { seconds: templateDetail.Duration })}
\r\n \r\n
\r\n );\r\n};\r\n\r\nStoryBoardView.propTypes = {\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func,\r\n }).isRequired,\r\n scenes: PropTypes.arrayOf(PropTypes.shape({})).isRequired,\r\n selectedSceneId: PropTypes.number.isRequired,\r\n onSceneSelected: PropTypes.func.isRequired,\r\n videoMetadata: PropTypes.shape({\r\n audio: PropTypes.string.isRequired,\r\n }).isRequired,\r\n};\r\n","import { useCallback, useEffect, useMemo, useState } from 'react';\r\nimport { isEqual, omit, some, keys } from 'underscore';\r\nimport { getParameter, getDomain } from '@bingads-webui/url-util';\r\nimport { getTextSizeLimitation, ColorTypeEnum } from './util';\r\n\r\n// for testing\r\nconst isSelenium = getParameter('isselenium');\r\nconst isLocal = getDomain(window.location.href) === 'localhost';\r\nconst mock = isSelenium === 'true' || isLocal;\r\nconst defaultColor = '#FFFFFF';\r\nconst defaultTextData = {\r\n font: 'Arial',\r\n color: defaultColor,\r\n fontWeight: 'Normal',\r\n};\r\n\r\n// mock\r\nconst mockEditResponse = {\r\n recommendationId: '14716601-9749-4fb5-a700-a00860f3a65c',\r\n url: 'https://mmastoragedev.blob.core.windows.net/testdata/mock-project-2.json',\r\n recommendationFormat: 'Clipchamp',\r\n thumbnailUrl: 'https://mmastoragedev.blob.core.windows.net/testdata/images/recommendation_test_DO_NOT_DEL/video-thumbnail.jpeg',\r\n videoMetadata: {\r\n width: 1280,\r\n height: 720,\r\n durationInMs: 15000,\r\n },\r\n template: {\r\n templateId: 'a3f900b6-942a-4b55-bb1d-87bae12229f0',\r\n audio: {\r\n category: 'Chill',\r\n fileName: 'abc.mp3',\r\n audioName: 'abc',\r\n },\r\n scenes: [\r\n {\r\n images: [\r\n 'https://mmastoragedev.blob.core.windows.net/testdata/images/recommendation_test_DO_NOT_DEL/autvideo_1.jpg',\r\n ],\r\n imageData: [\r\n {\r\n targetWidth: 720,\r\n targetHeight: 1280,\r\n itemId: 'af0d9795-2394-4e70-a366-6bf4a3fb0959',\r\n },\r\n ],\r\n text: [\r\n 'Premium Thai Food',\r\n 'Get your spice on',\r\n ],\r\n textData: [\r\n {\r\n font: 'Arial',\r\n color: '#FFFFFF',\r\n maxLength: 30,\r\n itemId: 'c77085f6-e229-4004-ab15-2c3605d5ae9a',\r\n },\r\n {\r\n font: 'Arial',\r\n color: '#FFFFFF',\r\n maxLength: 50,\r\n itemId: '0decb36c-8048-4eaa-926a-3ca71d126734',\r\n },\r\n ],\r\n logos: [\r\n 'https://mmastoragedev.blob.core.windows.net/testdata/images/recommendation_test_DO_NOT_DEL/logo.png',\r\n ],\r\n logoData: [\r\n {\r\n targetWidth: 500,\r\n targetHeight: 500,\r\n itemId: 'd4505e7a-d552-4b8a-bee6-eb390dd31d74',\r\n },\r\n ],\r\n keyFrame: {\r\n templateId: 'a3f900b6-942a-4b55-bb1d-87bae12229f0',\r\n url: 'https://mmastoragedev.blob.core.windows.net/testdata/images/recommendation_test_DO_NOT_DEL/keyframe1.png',\r\n },\r\n },\r\n ],\r\n },\r\n};\r\n\r\nconst useRecommendations = ({ copilotDataService }) => {\r\n const { editVideoAdsAssetRecommendations, fetchAssets } = copilotDataService;\r\n // const fetchEditedVideo = useMemo(() => _.memoize(_.throttle(editVideoAdsAssetRecommendations, 100)), [editVideoAdsAssetRecommendations]);\r\n\r\n const generateVideo = ({\r\n scenes, video, styles, audio,\r\n }) => {\r\n const { template } = video;\r\n const { templateId } = template;\r\n const newVideoMetaData = {\r\n template: {\r\n templateId,\r\n audio,\r\n scenes: scenes.map((scene) => {\r\n const {\r\n images, imageData, text, textData, logos, logoData,\r\n } = scene;\r\n return {\r\n images,\r\n imageData,\r\n text,\r\n textData,\r\n logos,\r\n logoData,\r\n };\r\n }),\r\n },\r\n };\r\n const ads = newVideoMetaData;\r\n return editVideoAdsAssetRecommendations(ads, false, styles)\r\n .then((res) => {\r\n if (res.data && res.data.ads && res.data.ads.length > 0) {\r\n return res.data.ads[0];\r\n }\r\n if (mock === true) {\r\n return mockEditResponse;\r\n }\r\n\r\n return res;\r\n })\r\n .catch(error => error);\r\n };\r\n\r\n return {\r\n generateVideo,\r\n fetchAssets,\r\n };\r\n};\r\n\r\nconst extractStylesFromScenes = (scenes) => {\r\n const { textData } = scenes[0].effective;\r\n const { font, color, fontWeight } = textData && textData.length > 0 ? textData[0] : defaultTextData;\r\n return {\r\n font,\r\n color,\r\n fontWeight,\r\n };\r\n};\r\n\r\n// even the same scene, the keyFrame url could be different.\r\nconst isEqualScene = (scene1, scene2) => isEqual(omit(scene1, 'keyFrame'), omit(scene2, 'keyFrame'));\r\nconst isSceneChanged = scene => (scene.effective ? !isEqualScene(scene.updating, scene.effective) : !isEqualScene(scene.original, scene.updating));\r\nconst isVideoChanged = scenes => scenes.some(scene => isSceneChanged(scene));\r\n\r\n// For the scene related state, we could save them into a single scene object, and then use the id to locate the scene object.\r\n// Text, Image, KeyFrame are the main scene properties that could be changed. (KeyFrame is from the API call. Text and Image are also included in the API calls.)\r\n// Original, Updating and Effective are for checking if the scene has been changed.\r\n// For the video, we could save the video URL and it's related scenes.\r\n// To check if the video could be generated, we could check if the scenes have been changed.\r\n// If the scenes have been changed, we could generate the video.\r\n// If the scenes are not changed, we could apply the video and it's related scenes (if we want to save the metadata).\r\n\r\n// videoMetaData is the original video.\r\nexport const useEditVideoAdsViewState = ({\r\n videoMetaData,\r\n copilotDataService,\r\n logger,\r\n i18n,\r\n isCTV,\r\n brandKit,\r\n finalUrl,\r\n activity,\r\n showVideoTemplateSummaryBarControl,\r\n}) => {\r\n const {\r\n generateVideo,\r\n fetchAssets,\r\n } = useRecommendations({\r\n copilotDataService,\r\n });\r\n\r\n const [scenes, setScenes] = useState([]);\r\n const [selectedSceneId, setSelectedSceneId] = useState(0); // Used to locate the scene with id\r\n const [video, setVideo] = useState({});\r\n const [audioState, setAudioState] = useState({});\r\n const [fontsState, setFontsState] = useState([]);\r\n const [palettesState, setPalettesState] = useState([]);\r\n const [videoUrl, setVideoUrl] = useState(videoMetaData && videoMetaData.url);\r\n const [videoSettings, setVideoSettings] = useState({}); // Used to store the video settings [logo, businessName]\r\n const [isGeneratingVideo, setIsGeneratingVideo] = useState(false);\r\n const [generateError, setGenerateError] = useState(undefined); // Used to show the error message\r\n const [recommendedAssets, setRecommendedAssets] = useState([]);\r\n const [isLoadingRecommendedAssets, setIsLoadingRecommendedAssets] = useState(false);\r\n const [copilotRecommendedAssets, setCopilotRecommendedAssets] = useState(null);\r\n\r\n // Update current state with response from AIGC\r\n const updateStateFromFetchResponse = useCallback((response) => {\r\n // initialization from the video metadata\r\n const {\r\n scenes: scenesInner = [], businessName, audio, backgroundColor,\r\n } = response && response.template;\r\n const scenesWithIds = scenesInner.map((scene, index) => ({\r\n original: (scene.original ? scene.original : scene), // Original won't be overridden by updates\r\n updating: scene, // Used to keep track of the scene changes (the react view will modify this part)\r\n effective: scene, // Assume, we've already generated the scene\r\n id: index,\r\n newImages: (scene.images ? scene.images.map(imageUrl => ({ url: imageUrl, id: '' })) : []),\r\n newLogos: (scene.logos ? scene.logos.map(logoUrl => ({ url: logoUrl, id: '' })) : []),\r\n }));\r\n\r\n setScenes(scenesWithIds);\r\n setVideoUrl(response.url || response.src);\r\n setVideo({\r\n ...response,\r\n });\r\n setAudioState({\r\n original: audio,\r\n updating: audio,\r\n effective: audio,\r\n });\r\n const { font, color, fontWeight } = extractStylesFromScenes(scenesWithIds);\r\n const fonts = { font, fontWeight };\r\n setFontsState({\r\n original: fonts,\r\n updating: fonts,\r\n effective: fonts,\r\n });\r\n\r\n const palettes = [\r\n { Name: ColorTypeEnum.TextColor, HexCode: (color || defaultColor) },\r\n { Name: ColorTypeEnum.BackgroundColor, HexCode: ((backgroundColor && backgroundColor.color) || defaultColor) },\r\n ];\r\n const filteredPalettes = palettes.filter(c => c.HexCode);\r\n\r\n setPalettesState({\r\n original: filteredPalettes,\r\n updating: filteredPalettes,\r\n effective: filteredPalettes,\r\n });\r\n const videoSettingsInner = {\r\n businessName,\r\n };\r\n setVideoSettings({\r\n original: videoSettingsInner,\r\n updating: videoSettingsInner,\r\n effective: videoSettingsInner,\r\n });\r\n\r\n // fetch recommended assets\r\n if (finalUrl) {\r\n setIsLoadingRecommendedAssets(true);\r\n fetchAssets().then((res) => {\r\n if (res && res.RecommendedAssets) {\r\n const { RecommendedAssets, Logo } = res;\r\n const assetsObj = { ...RecommendedAssets, Logo: Logo || '' };\r\n setRecommendedAssets(assetsObj);\r\n setCopilotRecommendedAssets(res);\r\n setIsLoadingRecommendedAssets(false);\r\n }\r\n })\r\n .finally(() => setIsLoadingRecommendedAssets(false));\r\n }\r\n }, [fetchAssets, finalUrl]);\r\n\r\n useEffect(() => {\r\n if (videoMetaData) {\r\n updateStateFromFetchResponse(videoMetaData);\r\n if (isCTV) {\r\n logger.logTrace('CTV Copilot video editor: editor panel opened');\r\n } else {\r\n logger.logTrace('OLV Copilot video editor: editor panel opened');\r\n }\r\n }\r\n }, [logger, videoMetaData, isCTV, updateStateFromFetchResponse]);\r\n\r\n const createStylesRequestObject = useCallback(() => {\r\n // const { textColor, backgroundColor } = (palettesState && palettesState.updating) || {};\r\n const colorProperties = palettesState && palettesState.updating.reduce((acc, color) => {\r\n acc[color.Name] = color;\r\n return acc;\r\n }, {});\r\n const { textColor, backgroundColor } = colorProperties || {};\r\n const { font, fontWeight } = (fontsState && fontsState.updating) || {};\r\n const palettes = [{ colorType: textColor.Name, colors: [textColor.HexCode] }, { colorType: backgroundColor.Name, colors: [backgroundColor.HexCode] }];\r\n const fonts = [{ type: font, weight: fontWeight }];\r\n return { palettes, fonts };\r\n }, [palettesState, fontsState]);\r\n\r\n const generateNewVideo = useCallback((scenesInCall) => {\r\n setGenerateError(undefined);\r\n setIsGeneratingVideo(true);\r\n\r\n const styles = createStylesRequestObject();\r\n const audio = (audioState && audioState.updating) || {};\r\n\r\n return generateVideo({\r\n scenes: scenesInCall.map(scene => scene.updating), video, styles, audio,\r\n }).then((newVideoMetaData) => {\r\n updateStateFromFetchResponse(newVideoMetaData);\r\n if (isCTV) {\r\n logger.logTrace('CTV Copilot video editor: video generated');\r\n } else {\r\n logger.logTrace('OLV Copilot video editor: video generated');\r\n }\r\n\r\n if (activity && activity.signal) {\r\n const message = `[VideoAdsEditor] - Edit Video - Generate - TemplateId:${videoMetaData.template.templateId}, AdStudio:${showVideoTemplateSummaryBarControl}`;\r\n activity.signal(message);\r\n }\r\n\r\n return {\r\n ...newVideoMetaData,\r\n scenes,\r\n msg: 'success',\r\n };\r\n }).catch((error) => {\r\n const { errors } = error;\r\n if (errors && errors[0] && errors[0].message) {\r\n setGenerateError(errors[0].message);\r\n } else {\r\n setGenerateError(i18n.getString(_TL_('Copilot has failed to generate a new video. Please try again later.')));\r\n }\r\n return {\r\n msg: 'failed',\r\n };\r\n })\r\n .finally(() => {\r\n setIsGeneratingVideo(false);\r\n });\r\n }, [generateVideo, video, logger, i18n, createStylesRequestObject, audioState, isCTV, scenes, updateStateFromFetchResponse]);\r\n\r\n const selectedScene = useMemo(() => scenes && scenes.find(scene => scene.id === selectedSceneId), [scenes, selectedSceneId]) || {\r\n original: {},\r\n updating: {},\r\n effective: {},\r\n id: -1,\r\n };\r\n\r\n const onSceneSelected = useCallback((scene) => {\r\n setSelectedSceneId(scene.id);\r\n }, []);\r\n\r\n const onScenesUpdated = useCallback((updatedScenes) => {\r\n setScenes(updatedScenes);\r\n }, []);\r\n\r\n const onFontsUpdated = useCallback((updatedFonts) => {\r\n setFontsState(updatedFonts);\r\n }, []);\r\n\r\n const onPalettesUpdated = useCallback((hex, colorType) => {\r\n setPalettesState((prevState) => {\r\n const newState = { ...prevState };\r\n const index = newState.updating.findIndex(c => c.Name === colorType);\r\n if (index !== -1) {\r\n newState.updating[index].HexCode = hex;\r\n }\r\n return newState;\r\n });\r\n }, []);\r\n\r\n const handleGenerateVideo = useCallback(() => {\r\n generateNewVideo(scenes);\r\n }, [generateNewVideo, scenes]);\r\n\r\n const handleGenerate = useCallback(() => {\r\n logger.logTrace('Copilot video editor: generate button clicked');\r\n handleGenerateVideo();\r\n }, [logger, handleGenerateVideo]);\r\n\r\n const textErrorMessages = useMemo(() => {\r\n const errorMessages = {};\r\n scenes.forEach((scene) => {\r\n errorMessages[scene.id] = [];\r\n const updatingText = scene.updating.text;\r\n const maxLengthOfText = getTextSizeLimitation(scene.updating.keyFrame.templateId);\r\n updatingText.forEach((text, index) => {\r\n if (text.length > maxLengthOfText[index]) {\r\n errorMessages[scene.id].push(i18n.getString(_TL_('Value cannot be longer than {{maxLength}} characters'), { maxLength: maxLengthOfText[index] }));\r\n } else if (text.length === 0) {\r\n errorMessages[scene.id].push(i18n.getString(_TL_('Required field')));\r\n } else {\r\n errorMessages[scene.id].push('');\r\n }\r\n });\r\n });\r\n\r\n return errorMessages;\r\n }, [i18n, scenes]);\r\n\r\n const haveTextError = useMemo(() => {\r\n const haveErrorInScenes = [];\r\n if (textErrorMessages) {\r\n keys(textErrorMessages).forEach((key) => {\r\n haveErrorInScenes.push(some(textErrorMessages[key]));\r\n });\r\n }\r\n return some(haveErrorInScenes);\r\n }, [textErrorMessages]);\r\n\r\n const textErrorForSelectedScene = useMemo(() => textErrorMessages[selectedSceneId], [selectedSceneId, textErrorMessages]);\r\n\r\n const onImageUpdated = useCallback((images) => {\r\n setScenes(prevScenes => prevScenes.map((scene) => {\r\n if (scene.id === selectedSceneId) {\r\n return {\r\n ...scene,\r\n updating: {\r\n ...scene.updating,\r\n images: images.map(image => image.url),\r\n },\r\n newImages: images,\r\n };\r\n }\r\n return scene;\r\n }));\r\n }, [selectedSceneId]);\r\n\r\n const onLogoUpdated = useCallback((logos) => {\r\n setScenes(prevScenes => prevScenes.map((scene) => {\r\n if (scene.id === selectedSceneId) {\r\n return {\r\n ...scene,\r\n updating: {\r\n ...scene.updating,\r\n logos: logos.map(logo => logo.url),\r\n },\r\n newLogos: logos,\r\n };\r\n }\r\n return scene;\r\n }));\r\n }, [selectedSceneId]);\r\n\r\n const disableGenerate = useMemo(() =>\r\n isGeneratingVideo\r\n || !(isVideoChanged(scenes, videoSettings))\r\n || haveTextError, [haveTextError, isGeneratingVideo, scenes, videoSettings]);\r\n\r\n return {\r\n video,\r\n setVideo,\r\n selectedSceneId,\r\n setSelectedSceneId,\r\n scenes,\r\n onSceneSelected,\r\n setScenes,\r\n selectedScene,\r\n onImageUpdated,\r\n onLogoUpdated,\r\n onScenesUpdated,\r\n onFontsUpdated,\r\n onPalettesUpdated,\r\n disableGenerate,\r\n isGeneratingVideo,\r\n handleGenerate,\r\n generateError,\r\n setGenerateError,\r\n textErrorForSelectedScene,\r\n videoSettings,\r\n setVideoSettings,\r\n brandKit,\r\n palettesState,\r\n fontsState,\r\n audioState,\r\n setAudioState,\r\n recommendedAssets,\r\n isLoadingRecommendedAssets,\r\n videoUrl,\r\n copilotRecommendedAssets,\r\n };\r\n};\r\n","import React, { useMemo, useCallback, useState, useEffect } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport classNames from 'classnames';\r\nimport { mergeClasses, FluentProvider, webLightTheme, Button } from '@fluentui/react-components';\r\nimport { Overlay, MessageBar, MessageBarType } from '@bingads-webui-react/fabric-control';\r\nimport { Dismiss24Regular, VideoRegular, Send16Regular, ChevronLeftRegular, ChevronRightRegular } from '@fluentui/react-icons';\r\nimport {\r\n DrawerBody,\r\n DrawerHeader,\r\n DrawerHeaderTitle,\r\n Drawer,\r\n DrawerFooter,\r\n} from '@fluentui/react-drawer';\r\nimport { AssetLibrarySpinner } from '@bingads-webui-campaign-react/asset-library-spinner';\r\nimport { PreviewClipchampVideoModal } from '@bingads-webui-campaign-react/clipchamp-player';\r\nimport { useRecommendations } from '@bingads-webui-campaign-react/perf-max-recommendation';\r\n\r\nimport { VideoTemplateSummaryBarControl } from '../components/video-template-summary-bar-control';\r\nimport { useStyles } from './style';\r\nimport { EditVideoNavigationView } from '../navigation-view';\r\nimport { EditVideoAssetsView } from './assets-editor';\r\nimport { EditVideoStyleView } from './style-editor';\r\nimport { EditVideoAudioView } from './audio-editor';\r\nimport { ScenePreview } from './scene-preview';\r\nimport { StoryBoardView } from './story-board';\r\nimport { ViewName } from '../util';\r\nimport { useNavigationState } from '../use-navigation-state';\r\nimport { useEditVideoAdsViewState } from '../state';\r\n\r\nexport const EditVideoPageComponent = ({\r\n i18n,\r\n isOpen,\r\n setIsOpen,\r\n videoMetaData,\r\n cid,\r\n aid,\r\n oDataConfig,\r\n finalUrl,\r\n activity,\r\n copilotDataService,\r\n onChangeImage,\r\n onChangeLogo,\r\n logger,\r\n isCTV,\r\n preferenceService,\r\n serverContext,\r\n perfMarker,\r\n isDialog,\r\n permissions,\r\n loadClipchampPlayer,\r\n brandKit,\r\n templateDetail,\r\n isLoadingBrandKit,\r\n onApply,\r\n instrumentation,\r\n showVideoTemplateSummaryBarControl,\r\n}) => {\r\n const classes = useStyles();\r\n const { currentView, setCurrentView } = useNavigationState();\r\n const [showPreviewVideoModal, setShowPreviewVideoModal] = useState(false);\r\n const ref = React.useRef(null);\r\n const noBorderStyle = {\r\n border: 'none',\r\n outline: 'none',\r\n };\r\n\r\n const {\r\n handleCopilotBannerFetchSucceeded,\r\n } = useRecommendations({\r\n cid,\r\n aid,\r\n campaignId: -1,\r\n permissions,\r\n finalUrl,\r\n isDisplayPlus: false,\r\n enableCopilotRecommendations: true,\r\n instrumentation,\r\n isMMA: false,\r\n isSignup: false,\r\n skipBusinessNameRecommendation: true,\r\n });\r\n\r\n const {\r\n selectedSceneId,\r\n onSceneSelected,\r\n scenes,\r\n onImageUpdated,\r\n onLogoUpdated,\r\n onScenesUpdated,\r\n onFontsUpdated,\r\n onPalettesUpdated,\r\n video,\r\n videoSettings,\r\n isGeneratingVideo,\r\n setVideoSettings,\r\n fontsState,\r\n palettesState,\r\n audioState,\r\n setAudioState,\r\n handleGenerate,\r\n recommendedAssets,\r\n isLoadingRecommendedAssets,\r\n generateError,\r\n setGenerateError,\r\n videoUrl,\r\n copilotRecommendedAssets,\r\n } = useEditVideoAdsViewState({\r\n onApply,\r\n videoMetaData,\r\n copilotDataService,\r\n logger,\r\n i18n,\r\n isCTV,\r\n finalUrl,\r\n handleCopilotBannerFetchSucceeded,\r\n activity,\r\n showVideoTemplateSummaryBarControl,\r\n });\r\n\r\n useEffect(() => {\r\n const parentContainer = ref && ref.current && ref.current.parentElement;\r\n if (parentContainer) {\r\n parentContainer.style.zIndex = '1000';\r\n }\r\n }, [ref]);\r\n\r\n const onHandleApply = useCallback(() => {\r\n const newVideo = { ...videoMetaData, ...video };\r\n newVideo.src = video.url || videoMetaData.src;\r\n onApply(newVideo);\r\n setIsOpen(false);\r\n if (activity && activity.signal) {\r\n const message = `[VideoAdsEditor] - Edit Video - Save - TemplateId:${videoMetaData.template.templateId}, AdStudio:${showVideoTemplateSummaryBarControl}`;\r\n activity.signal(message);\r\n }\r\n }, [onApply, setIsOpen, videoMetaData, video, activity, showVideoTemplateSummaryBarControl]);\r\n\r\n const handleTextListChange = useCallback((textList) => {\r\n const updatedScenes = scenes.map((scene) => {\r\n if (scene.id === selectedSceneId) {\r\n return {\r\n ...scene,\r\n updating: {\r\n ...scene.updating,\r\n text: textList,\r\n },\r\n };\r\n }\r\n return scene;\r\n });\r\n onScenesUpdated(updatedScenes);\r\n }, [scenes, selectedSceneId, onScenesUpdated]);\r\n\r\n const deepClone = useCallback((cloneIt) => {\r\n if (cloneIt === null || typeof cloneIt !== 'object') return cloneIt;\r\n if (Array.isArray(cloneIt)) {\r\n return cloneIt.map(item => deepClone(item));\r\n }\r\n\r\n const result = {};\r\n Object.keys(cloneIt).forEach(key => {\r\n result[key] = deepClone(cloneIt[key]);\r\n });\r\n\r\n return result;\r\n });\r\n\r\n useEffect(() => {\r\n if (videoMetaData && videoMetaData.template && videoMetaData.template.scenes && videoMetaData.template.scenes.length > selectedSceneId) {\r\n const scene = videoMetaData.template.scenes[selectedSceneId];\r\n if (scene && scene.textData && scene.textData.length > 0 && finalUrl && copilotRecommendedAssets) {\r\n const selectedSceneTextData = scene.textData;\r\n const textData = selectedSceneTextData && selectedSceneTextData[0];\r\n const shortHeadlines = copilotRecommendedAssets.RecommendedAssets && copilotRecommendedAssets.RecommendedAssets.ShortHeadlines;\r\n\r\n if (textData && textData.maxLength > 0 && shortHeadlines) {\r\n const cloneCopilotRecommendedAssets = deepClone(copilotRecommendedAssets);\r\n const newTheme = cloneCopilotRecommendedAssets.RecommendedAssets.Themes.map(item => {\r\n if (item.ShortHeadlines) {\r\n // eslint-disable-next-line no-param-reassign\r\n item.ShortHeadlines = item.ShortHeadlines.filter(shortHeadline => shortHeadline.Text.length <= textData.maxLength);\r\n }\r\n return item;\r\n });\r\n\r\n const filteredRecommendations = {\r\n RecommendedAssets: cloneCopilotRecommendedAssets.RecommendedAssets,\r\n Logo: cloneCopilotRecommendedAssets.Logo,\r\n Cta: cloneCopilotRecommendedAssets.Cta,\r\n IsCustomerIdInExclusionList: cloneCopilotRecommendedAssets.IsCustomerIdInExclusionList,\r\n };\r\n\r\n filteredRecommendations.RecommendedAssets.ShortHeadlines = shortHeadlines.filter(item => item.Text.length <= textData.maxLength);\r\n filteredRecommendations.RecommendedAssets.Themes = newTheme;\r\n\r\n handleCopilotBannerFetchSucceeded(finalUrl, filteredRecommendations);\r\n }\r\n }\r\n }\r\n }, [videoMetaData, selectedSceneId, copilotRecommendedAssets, finalUrl, handleCopilotBannerFetchSucceeded]);\r\n\r\n\r\n const onCloseVideoPreview = useCallback(() => {\r\n setShowPreviewVideoModal(false);\r\n }, [setShowPreviewVideoModal]);\r\n\r\n const handleSelectNextScene = useCallback(() => {\r\n const selectedScene = scenes[selectedSceneId + 1];\r\n onSceneSelected(selectedScene);\r\n }, [onSceneSelected, selectedSceneId, scenes]);\r\n\r\n const handleSelectPreviousScene = useCallback(() => {\r\n const selectedScene = scenes[selectedSceneId - 1];\r\n onSceneSelected(selectedScene);\r\n }, [onSceneSelected, selectedSceneId, scenes]);\r\n\r\n const isPreviousDisabled = useMemo(() => selectedSceneId <= 0, [selectedSceneId]);\r\n const isNextDisabled = useMemo(() => selectedSceneId >= scenes.length - 1, [scenes, selectedSceneId]);\r\n\r\n const VideoEditContent = useMemo(() => (\r\n \r\n
\r\n \r\n
\r\n \r\n {isGeneratingVideo && (\r\n \r\n \r\n )}\r\n {videoMetaData && videoMetaData.template && (\r\n
\r\n \r\n {showPreviewVideoModal &&
\r\n )}\r\n {\r\n !isGeneratingVideo && (!videoMetaData || !videoMetaData.template) &&\r\n \r\n
\r\n \r\n {currentView === ViewName.AssetsView && (\r\n
\r\n \r\n
\r\n )}\r\n {i18n.getString(_TL_('Edit scene '))}{selectedSceneId + 1}{i18n.getString(_TL_(' of '))}{scenes.length}
\r\n \r\n
\r\n \r\n
\r\n \r\n {\r\n currentView === ViewName.AssetsView &&\r\n
\r\n \r\n
\r\n \r\n {\r\n generateError &&\r\n setGenerateError(undefined)}\r\n dismissButtonAriaLabel=\"Close\"\r\n >\r\n {generateError}\r\n \r\n }\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n }\r\n \r\n \r\n {i18n.getString(_TL_('An error occured while loading the video.'))}\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n ) : (\r\n \r\n {VideoEditContent}\r\n
\r\n \r\n \r\n
\r\n \r\n \r\n {i18n.getString(_TL_('Apply'))}\r\n \r\n {\r\n setIsOpen(false);\r\n logger.logTrace('Copilot video editor: Cancel button clicked');\r\n }}\r\n >\r\n {i18n.getString(_TL_('Cancel'))}\r\n \r\n
\r\n \r\n {VideoEditContent}\r\n
\r\n )\r\n );\r\n};\r\n\r\nEditVideoPageComponent.propTypes = {\r\n i18n: PropTypes.shape({}).isRequired,\r\n isOpen: PropTypes.bool.isRequired,\r\n setIsOpen: PropTypes.func.isRequired,\r\n videoMetaData: PropTypes.shape({\r\n images: PropTypes.arrayOf(PropTypes.string),\r\n text: PropTypes.arrayOf(PropTypes.string),\r\n }).isRequired,\r\n cid: PropTypes.string.isRequired,\r\n aid: PropTypes.string.isRequired,\r\n oDataConfig: PropTypes.shape({}).isRequired,\r\n finalUrl: PropTypes.string.isRequired,\r\n activity: PropTypes.shape({\r\n signal: PropTypes.func,\r\n }).isRequired,\r\n onChangeImage: PropTypes.func.isRequired,\r\n onChangeLogo: PropTypes.func.isRequired,\r\n logger: PropTypes.shape({\r\n logTrace: PropTypes.func.isRequired,\r\n }).isRequired,\r\n dataService: PropTypes.shape({}).isRequired,\r\n copilotDataService: PropTypes.shape({}).isRequired,\r\n isCTV: PropTypes.bool,\r\n preferenceService: PropTypes.shape({}).isRequired,\r\n serverContext: PropTypes.shape({}).isRequired,\r\n perfMarker: PropTypes.shape({}).isRequired,\r\n isDialog: PropTypes.bool,\r\n permissions: PropTypes.shape({}).isRequired,\r\n loadClipchampPlayer: PropTypes.func.isRequired,\r\n brandKit: PropTypes.shape({\r\n palettes: PropTypes.arrayOf(PropTypes.shape({\r\n Name: PropTypes.string,\r\n HexCode: PropTypes.string,\r\n isBrandKitColor: PropTypes.bool,\r\n })),\r\n }).isRequired,\r\n templateDetail: PropTypes.shape({\r\n templateId: PropTypes.string,\r\n templateName: PropTypes.string,\r\n }).isRequired,\r\n isLoadingBrandKit: PropTypes.bool.isRequired,\r\n onApply: PropTypes.func.isRequired,\r\n instrumentation: PropTypes.shape({}).isRequired,\r\n showVideoTemplateSummaryBarControl: PropTypes.bool.isRequired,\r\n};\r\n\r\nEditVideoPageComponent.defaultProps = {\r\n isCTV: false,\r\n isDialog: false,\r\n};\r\n","import { useState } from 'react';\r\nimport { ViewName } from './util';\r\n\r\n\r\nexport const useNavigationState = () => {\r\n const [currentView, setCurrentView] = useState(ViewName.AssetsView);\r\n\r\n return {\r\n currentView,\r\n setCurrentView,\r\n };\r\n};\r\n","import { extensionEditorStyles } from '@bingads-webui-campaign-react/common-styles';\r\n\r\nexport const getGlobalLogoPickerStyles = (_, { palette = {} }) => ({\r\n '@global': {\r\n ...extensionEditorStyles({ palette }),\r\n },\r\n});\r\n","/* eslint-disable no-param-reassign */\r\nimport React, { useState, useEffect, useCallback, useContext } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { withDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\nimport { getImageValidationErrorMessage } from '@bingads-webui-campaign/image-experience-utils';\r\nimport { useBrandKitService } from '@bingads-webui-campaign-react/brandkit-data-service';\r\nimport { useCopilotRepositoryContext } from '@bingads-webui/inline-copilot';\r\nimport { withCopilotDomainDataService } from '@bingads-webui-campaign-react/copilot-domain-data-service';\r\nimport { withRecommendationContext } from '@bingads-webui-campaign-react/perf-max-recommendation';\r\nimport { withInstrumentation, InstrumentationContext } from '@bingads-webui-react/hoc-with-instrumentation';\r\nimport { withLoggingContext } from '@bingads-webui-campaign-react/copilot-loggers';\r\nimport { EditVideoPageComponent } from './video-template-editor';\r\nimport { getGlobalLogoPickerStyles } from './styles';\r\n\r\nexport const VideoTemplateEditorWithAddImageWrapperImp = ({\r\n assetLibraryConfig,\r\n activity,\r\n i18n,\r\n logger,\r\n assetLibraryUserPreferences,\r\n assetLibraryAccountPreferences,\r\n ianaTimeZone,\r\n onApply,\r\n isOpen,\r\n setIsOpen,\r\n videoMetaData,\r\n cid,\r\n aid,\r\n oDataConfig,\r\n finalUrl,\r\n isCTV,\r\n preferenceService,\r\n serverContext,\r\n isDialog,\r\n permissions,\r\n loadClipchampPlayer,\r\n copilotDomainDataService,\r\n showVideoTemplateSummaryBarControl,\r\n ...rest\r\n}) => {\r\n const [, setShowAddImagePanel] = useState(false);\r\n const [, setMinSizeOfImage] = useState([0, 0]);\r\n const [, setShowAddLogoPanel] = useState(false);\r\n const [brandKit, setBrandKit] = useState({});\r\n const [isLoadingBrandKit, setIsLoadingBrandKit] = useState(false);\r\n const [templateDetail, setTemplateDetail] = useState(null);\r\n const instrumentation = useContext(InstrumentationContext);\r\n\r\n assetLibraryConfig.assetLibraryUserPreferences = assetLibraryUserPreferences;\r\n assetLibraryConfig.assetLibraryAccountPreferences = assetLibraryAccountPreferences;\r\n assetLibraryConfig.logger = logger;\r\n assetLibraryConfig.ianaTimeZone = ianaTimeZone;\r\n assetLibraryConfig.onImageAddError = (e) => {\r\n const errorCode = e && e.errors && e.errors[0] && e.errors[0].Code;\r\n const errorMessage = getImageValidationErrorMessage({ message: errorCode }, i18n);\r\n return errorMessage;\r\n };\r\n\r\n const copilotDataService = useCopilotRepositoryContext();\r\n const { brandKitDataService } = useBrandKitService();\r\n const { getBrandKits } = brandKitDataService;\r\n\r\n // Fetch BrandKits\r\n const fetchBrandKits = useCallback(async () => {\r\n if (getBrandKits) {\r\n setIsLoadingBrandKit(true);\r\n const { response } = await getBrandKits(aid);\r\n if (Array.isArray(response) && response.length > 0) {\r\n setBrandKit(response[0]);\r\n }\r\n setIsLoadingBrandKit(false);\r\n }\r\n }, [aid, getBrandKits]);\r\n\r\n const fetchTemplateDetails = useCallback(async () => {\r\n if (copilotDomainDataService && videoMetaData && videoMetaData.template.templateId) {\r\n try {\r\n const templateFilter = {\r\n TemplateIds: [videoMetaData.template.templateId],\r\n };\r\n const { response } = await copilotDomainDataService.getVideoTemplates(templateFilter, i18n);\r\n setTemplateDetail((response && response.Templates && response.Templates.length > 0 ? response.Templates[0] : null));\r\n } catch (error) {\r\n setTemplateDetail(null);\r\n }\r\n }\r\n }, [copilotDomainDataService, videoMetaData, i18n]);\r\n\r\n useEffect(() => {\r\n fetchBrandKits();\r\n }, [fetchBrandKits]);\r\n\r\n useEffect(() => {\r\n fetchTemplateDetails();\r\n }, [fetchTemplateDetails]);\r\n\r\n useEffect(() => {\r\n if (activity && activity.signal) {\r\n const message = `[VideoAdsEditor] - Edit Video - Open - TemplateId:${videoMetaData.template.templateId}, AdStudio:${showVideoTemplateSummaryBarControl}`;\r\n activity.signal(message);\r\n }\r\n }, [activity, videoMetaData, showVideoTemplateSummaryBarControl]);\r\n\r\n return (\r\n \r\n {\r\n setShowAddImagePanel(true);\r\n setMinSizeOfImage(minSize);\r\n }}\r\n assetLibraryConfig={assetLibraryConfig}\r\n onChangeLogo={() => setShowAddLogoPanel(true)}\r\n isCTV={isCTV}\r\n preferenceService={preferenceService}\r\n serverContext={serverContext}\r\n perfMarker={rest.perfMarker}\r\n isDialog={isDialog}\r\n permissions={permissions}\r\n loadClipchampPlayer={loadClipchampPlayer}\r\n brandKit={brandKit}\r\n isLoadingBrandKit={isLoadingBrandKit}\r\n templateDetail={templateDetail}\r\n copilotDomainDataService={copilotDomainDataService}\r\n instrumentation={instrumentation}\r\n showVideoTemplateSummaryBarControl={showVideoTemplateSummaryBarControl}\r\n />\r\n
\r\n );\r\n};\r\n\r\nVideoTemplateEditorWithAddImageWrapperImp.propTypes = {\r\n assetLibraryConfig: PropTypes.shape({\r\n activityLogger: PropTypes.shape({}),\r\n assetLibraryUserPreferences: PropTypes.shape({}),\r\n assetLibraryAccountPreferences: PropTypes.shape({}),\r\n ianaTimeZone: PropTypes.string,\r\n logger: PropTypes.shape({}),\r\n onImageAddError: PropTypes.func,\r\n }).isRequired,\r\n copilotDataService: PropTypes.shape({}).isRequired,\r\n i18n: PropTypes.shape({}).isRequired,\r\n initialView: PropTypes.string.isRequired,\r\n isAssetLibraryAIGCMVPEnabled: PropTypes.bool.isRequired,\r\n isLiteLandingPageEnabled: PropTypes.bool.isRequired,\r\n logger: PropTypes.shape({}).isRequired,\r\n assetLibraryUserPreferences: PropTypes.shape({}).isRequired,\r\n assetLibraryAccountPreferences: PropTypes.shape({}).isRequired,\r\n ianaTimeZone: PropTypes.string.isRequired,\r\n onApply: PropTypes.func.isRequired,\r\n isOpen: PropTypes.bool.isRequired,\r\n setIsOpen: PropTypes.func.isRequired,\r\n videoMetaData: PropTypes.shape({\r\n images: PropTypes.arrayOf(PropTypes.string),\r\n text: PropTypes.arrayOf(PropTypes.string),\r\n }).isRequired,\r\n cid: PropTypes.string.isRequired,\r\n aid: PropTypes.string.isRequired,\r\n oDataConfig: PropTypes.shape({}).isRequired,\r\n finalUrl: PropTypes.string.isRequired,\r\n permissions: PropTypes.shape({\r\n IsSocialMediaImagesEnabled: PropTypes.bool,\r\n }).isRequired,\r\n isCTV: PropTypes.bool,\r\n preferenceService: PropTypes.shape({}).isRequired,\r\n serverContext: PropTypes.shape({}).isRequired,\r\n isDialog: PropTypes.bool,\r\n loadClipchampPlayer: PropTypes.func.isRequired,\r\n};\r\n\r\nVideoTemplateEditorWithAddImageWrapperImp.defaultProps = {\r\n isCTV: false,\r\n isDialog: false,\r\n};\r\n\r\nexport const VideoTemplateEditorWithAddImageWrapper = withInstrumentation(withLoggingContext(withRecommendationContext(withCopilotDomainDataService(withDefaultStyles(VideoTemplateEditorWithAddImageWrapperImp, getGlobalLogoPickerStyles)))));\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\n\r\nimport {\r\n withAssetLibraryServicesLoaded,\r\n} from '@bingads-webui-campaign-react/asset-library-services';\r\nimport { FolderAssetType } from '@bingads-webui-campaign-react/asset-library-model';\r\nimport { CampaignFetchProvider } from '@bingads-webui-campaign-react/campaign-http';\r\nimport { CopilotRepositoryProvider } from '@bingads-webui/inline-copilot';\r\nimport { VideoTemplateEditorWithAddImageWrapper } from './video-template-add-image-wrapper';\r\n\r\nconst EditVideoPageComponentWithDataServices = withAssetLibraryServicesLoaded(VideoTemplateEditorWithAddImageWrapper, { loggerTag: 'Video Template Editor' });\r\n\r\nexport const VideoTemplateEditorContextWrapper = ({\r\n assetLibraryConfig,\r\n permissions,\r\n isAADUser,\r\n isLiteLandingPageEnabled,\r\n isOpen,\r\n setIsOpen,\r\n videoMetaData,\r\n onApply,\r\n cid,\r\n aid,\r\n finalUrl,\r\n perfMarker,\r\n i18n,\r\n isCTV,\r\n serverContext,\r\n isDialog,\r\n loadClipchampPlayer,\r\n showVideoTemplateSummaryBarControl,\r\n}) => {\r\n // todo: don't pilot AAD user for now, remove this check after the feature is GAed\r\n const isAssetLibraryAIGCMVPEnabled = !isAADUser;\r\n\r\n const {\r\n timeZone,\r\n preferencesService,\r\n activityLogger,\r\n oDataConfig,\r\n dateFormat,\r\n } = assetLibraryConfig;\r\n\r\n const useClipchamp = permissions && permissions.dynamic && permissions.dynamic.VideoTemplateUI;\r\n\r\n return (\r\n isOpen ?\r\n \r\n {currentTimeString}\r\n {divider}\r\n {durationString}\r\n
\r\n );\r\n}\r\n\r\nTime.prototype.propTypes = {\r\n currentTime: PropTypes.number.isRequired,\r\n duration: PropTypes.number.isRequired,\r\n};\r\n\r\nexport function VideoPureComponent({\r\n i18n,\r\n ariaLabel,\r\n src,\r\n muteByDefault,\r\n className,\r\n classes,\r\n autoPlay,\r\n onVideoLoaded,\r\n iconColor,\r\n maxWidth,\r\n showTime,\r\n id,\r\n showPlay,\r\n customPlayObject,\r\n}) {\r\n const videoElement = useRef(null);\r\n const [volumeVisible, setVolumeVisible] = useState(false);\r\n const [paused, setPaused] = useState(true);\r\n const [muted, setMuted] = useState(muteByDefault);\r\n const [ended, setEnded] = useState(false);\r\n const [currentTime, setCurrentTime] = useState(0);\r\n const [duration, setDuration] = useState(0);\r\n const iconClass = getIconClass(iconColor);\r\n\r\n useEffect(() => {\r\n if (!videoElement.current) return;\r\n videoElement.current.onplay = () => {\r\n setPaused(false);\r\n setEnded(false);\r\n };\r\n videoElement.current.onpause = () => {\r\n setPaused(true);\r\n };\r\n videoElement.current.onended = () => {\r\n setEnded(true);\r\n };\r\n videoElement.current.ontimeupdate = (event) => {\r\n setCurrentTime(event.target.currentTime);\r\n };\r\n videoElement.current.onloadeddata = (event) => {\r\n onVideoLoaded();\r\n setDuration(event.target.duration);\r\n };\r\n }, [videoElement, onVideoLoaded]);\r\n\r\n useEffect(() => {\r\n if (customPlayObject) {\r\n const { play } = customPlayObject;\r\n if (play) {\r\n videoElement.current.play();\r\n } else {\r\n videoElement.current.pause();\r\n }\r\n }\r\n }, [customPlayObject]);\r\n\r\n const onUserSlideProgress = (v) => {\r\n if (_.isFinite(v)) {\r\n videoElement.current.currentTime = v;\r\n }\r\n if (videoElement && videoElement.current.paused) {\r\n videoElement.current.play();\r\n }\r\n };\r\n\r\n const onVolumeClick = () => {\r\n setMuted(!muted);\r\n };\r\n\r\n const playIconName = useMemo(() => {\r\n if (ended) {\r\n return 'videoReplay';\r\n }\r\n\r\n return paused ? 'videoPlayBig' : 'videoPause';\r\n }, [ended, paused]);\r\n\r\n useEffect(() => {\r\n if (onVideoLoaded && _.get(videoElement, ['current', 'complete'], false)) {\r\n onVideoLoaded();\r\n }\r\n }, [onVideoLoaded, videoElement]);\r\n\r\n const width = maxWidth ? { width: maxWidth } : {};\r\n\r\n return (\r\n \r\n \r\n
\r\n );\r\n}\r\n\r\nVideoPureComponent.propTypes = {\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func.isRequired,\r\n }).isRequired,\r\n classes: PropTypes.shape({\r\n previewVideo: PropTypes.string,\r\n root: PropTypes.string,\r\n container: PropTypes.string,\r\n volumeIcon: PropTypes.string,\r\n volumeSlider: PropTypes.string,\r\n videoControlsShadow: PropTypes.string,\r\n sliderContainer: PropTypes.string,\r\n videoContainer: PropTypes.string,\r\n }).isRequired,\r\n ariaLabel: PropTypes.string.isRequired,\r\n src: PropTypes.string.isRequired,\r\n className: PropTypes.string,\r\n muteByDefault: PropTypes.bool,\r\n autoPlay: PropTypes.bool,\r\n onVideoLoaded: PropTypes.func,\r\n iconColor: PropTypes.string,\r\n id: PropTypes.string,\r\n showTime: PropTypes.bool,\r\n maxWidth: PropTypes.number,\r\n showPlay: PropTypes.bool,\r\n customPlayObject: PropTypes.shape({\r\n play: PropTypes.bool,\r\n }),\r\n};\r\n\r\nVideoPureComponent.defaultProps = {\r\n className: '',\r\n showTime: false,\r\n muteByDefault: false,\r\n autoPlay: false,\r\n onVideoLoaded: _.noop,\r\n iconColor: 'white',\r\n id: '',\r\n maxWidth: 0,\r\n showPlay: true,\r\n customPlayObject: null,\r\n};\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { Icon } from '@bingads-webui-react/fabric-control';\r\n\r\nexport const FailedPlaceholder = props => (\r\n \r\n \r\n \r\n
\r\n \r\n {\r\n showPlay &&\r\n (paused ? videoElement.current.play() : videoElement.current.pause())}\r\n />\r\n }\r\n {showTime && }\r\n setVolumeVisible(!volumeVisible)}\r\n onFocus={() => setVolumeVisible(!volumeVisible)}\r\n onClick={onVolumeClick}\r\n />\r\n
\r\n \r\n
\r\n);\r\n\r\nFailedPlaceholder.propTypes = {\r\n placeholderContent: PropTypes.string.isRequired,\r\n textColor: PropTypes.string,\r\n classes: PropTypes.shape({\r\n failed: PropTypes.string.isRequired,\r\n }).isRequired,\r\n};\r\n\r\nFailedPlaceholder.defaultProps = {\r\n textColor: undefined,\r\n};\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { Icon } from '@bingads-webui-react/fabric-control';\r\n\r\nexport const EncodingPlaceholder = props => (\r\n {props.placeholderContent}
\r\n \r\n
\r\n);\r\n\r\nEncodingPlaceholder.propTypes = {\r\n placeholderContent: PropTypes.string.isRequired,\r\n textColor: PropTypes.string,\r\n classes: PropTypes.shape({\r\n encoding: PropTypes.string.isRequired,\r\n }).isRequired,\r\n};\r\n\r\nEncodingPlaceholder.defaultProps = {\r\n textColor: undefined,\r\n};\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { Icon } from '@bingads-webui-react/fabric-control';\r\n\r\nexport const UnverifiedPlaceholder = props => (\r\n {props.placeholderContent}
\r\n \r\n
\r\n);\r\n\r\nUnverifiedPlaceholder.propTypes = {\r\n placeholderContent: PropTypes.string.isRequired,\r\n textColor: PropTypes.string,\r\n classes: PropTypes.shape({\r\n unverified: PropTypes.string.isRequired,\r\n }).isRequired,\r\n};\r\n\r\nUnverifiedPlaceholder.defaultProps = {\r\n textColor: undefined,\r\n};\r\n","const commonParentStyles = {\r\n display: 'flex',\r\n alignItems: 'center',\r\n justifyContent: 'center',\r\n flexDirection: 'column',\r\n height: '100%',\r\n};\r\n\r\nconst iconCommonStyles = {\r\n fontSize: '36px',\r\n lineHeight: '36px',\r\n color: '#0078d4',\r\n};\r\n\r\nexport const getPlaceholderStyle = () => ({\r\n '@global': {\r\n '@keyframes spinner': {\r\n to: {\r\n transform: 'rotate(360deg)',\r\n },\r\n },\r\n '@keyframes downloading': {\r\n from: {\r\n transform: 'translateY(-18px)',\r\n },\r\n to: {\r\n transform: 'translateY(42px)',\r\n },\r\n },\r\n },\r\n encoding: {\r\n ...commonParentStyles,\r\n '& .placeholder-icon': {\r\n ...iconCommonStyles,\r\n animation: 'spinner 1.2s linear infinite',\r\n },\r\n '.add-video-content-container &': {\r\n marginTop: 14,\r\n },\r\n },\r\n unverified: {\r\n ...commonParentStyles,\r\n '& .download-icon-container': {\r\n overflow: 'hidden',\r\n borderBottom: '2px solid #0078d4',\r\n },\r\n '& .placeholder-icon': {\r\n ...iconCommonStyles,\r\n animation: 'downloading 1.2s ease infinite',\r\n },\r\n },\r\n failed: {\r\n ...commonParentStyles,\r\n '& .placeholder-icon': {\r\n ...iconCommonStyles,\r\n color: '#d83b01',\r\n },\r\n },\r\n});\r\n","import { FailedPlaceholder } from '@bingads-webui-campaign-react/video-status-placeholder-pure-component';\r\nimport { withDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\nimport { getPlaceholderStyle } from './styles';\r\n\r\nexport const FailedPlaceholderWithStyle = withDefaultStyles(FailedPlaceholder, getPlaceholderStyle);\r\n","import { EncodingPlaceholder } from '@bingads-webui-campaign-react/video-status-placeholder-pure-component';\r\nimport { withDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\nimport { getPlaceholderStyle } from './styles';\r\n\r\nexport const EncodingPlaceholderWithStyle = withDefaultStyles(EncodingPlaceholder, getPlaceholderStyle);\r\n","import { UnverifiedPlaceholder } from '@bingads-webui-campaign-react/video-status-placeholder-pure-component';\r\nimport { withDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\nimport { getPlaceholderStyle } from './styles';\r\n\r\nexport const UnverifiedPlaceholderWithStyle = withDefaultStyles(UnverifiedPlaceholder, getPlaceholderStyle);\r\n","import { withDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\nimport { VideoPureComponent } from '@bingads-webui-campaign-react/video-pure-component';\r\n\r\nimport { getControlStyles } from './styles';\r\n\r\nexport const Video = withDefaultStyles(VideoPureComponent, getControlStyles);\r\n","export const getControlStyles = () => ({\r\n root: {\r\n position: 'relative',\r\n width: '100%',\r\n overflow: 'hidden',\r\n top: -5,\r\n backgroundColor: 'rgba(0,0,0,0.75)',\r\n\r\n '& .ms-Button svg': {\r\n width: '100%',\r\n },\r\n '& .ms-Button:focus': {\r\n border: '1px solid #fff',\r\n },\r\n '& .ms-Button:hover': {\r\n backgroundColor: 'transparent',\r\n },\r\n },\r\n videoContainer: {\r\n paddingBottom: 32,\r\n },\r\n sliderContainer: {\r\n width: '100%',\r\n },\r\n previewVideo: {\r\n width: '100%',\r\n maxHeight: '100%',\r\n },\r\n container: {\r\n display: 'flex',\r\n alignItems: 'center',\r\n\r\n '& i': {\r\n width: '100%',\r\n cursor: 'pointer',\r\n },\r\n },\r\n});\r\n\r\n"],"names":["useStyles","makeStyles","container","_objectSpread","height","display","alignItems","shorthands","padding","tokens","spacingHorizontalL","previewButton","marginLeft","whiteSpace","saveButton","aspectRatio","justifyContent","divider","VideoTemplateSummaryBarControl","_ref","i18n","setShowPreviewVideoModal","onSaveVideo","metadata","activity","classes","_useState","useState","_useState2","_slicedToArray","summaryBar","setSummaryBar","useMemo","template","width","inputRatio","closestRatio","closestDiff","Math","abs","_i","_Object$entries","Object","entries","length","_Object$entries$_i","label","ratio","diff","getClosestAspectRatio","preview","useCallback","signal","message","concat","templateId","publish","customizedContent","_jsxs","className","mergeClasses","children","_Fragment","_jsx","Divider","vertical","Button","icon","VideoRegular","appearance","disabled","onClick","getString","_TL_","useEffect","timer","setInterval","summaryBarCustomizeEle","document","getElementById","clearInterval","error","createPortal","videoEditor","top","overFlowY","paddingLeft","paddingRight","editVideoPage","backgroundColor","navigationView","borderWidth","actionsWrapperContent","overflowY","overflowX","actionsWrapper","minWidth","maxWidth","paddingBottom","marginTop","marginBottom","boxShadow","borderRadius","overflow","previewContainer","flexDirection","flexGrow","position","spacingHorizontalM","scenePreview","storyBoardContainer","paddingTop","leftPanelTop","bottom","borderTop","marginRight","containerWrapper","generateButtonContainer","generateButton","margin","topNavigationParent","fontWeight","topNavigationLeft","textAlign","alignContent","topNavigationRight","editVideoPageNavigation","tabList","gap","tabItemWrapper","color","tabItem","alignSelf","fontSize","wordBreak","AssetsId","StyleId","AudioId","EditVideoNavigationView","currentView","setCurrentView","selectItem","id","isSelected","items","name","AddSquareFilled","AddSquareRegular","DesignIdeasFilled","DesignIdeasRegular","HeadphonesSoundWaveFilled","HeadphonesSoundWaveRegular","item","Tab","value","selected","TabList","selectedValue","map","defaultProps","topNavigation","spacingVerticalL","recommendedImage","collectionConfig","headlines","labelText","placeholderText","fieldName","singleAssetValidationPropsField","validationPropsField","addButtonText","copilotButtonLabel","deleteButtonLabel","minCollectionSize","maxCollectionSize","errorMessage","helpPopupTopic","helpPopupAriaLabel","inlineRecommendationsTitle","inlineRecommendationsHelpTopicKey","inlineRecommendationsHelpTopicAriaLabel","inlineRecommendationsDisabledItemTooltip","duplicateErrorMessage","ShortHeadlineAssetCollection","React","props","isOptional","placeholder","isMultipleOptions","onFocusTextAsset","onDeleteTextAsset","onApplyRecommendation","enableCopilotRecommendations","setAddNewShortHeadlinesCallback","addNewShortHeadlineCallback","useRef","noop","shortHeadlineAssetCollectionConfig","getTextAssetCollectionConfig","getShortHeadlineAssetCollectionConfig","recommendations","replaceExistingAssets","current","TextAssetCollectionWithRecommendations","renderInlineCopilot","showAddButton","showDeleteButton","withDeleteIconDisabled","replaceMode","hideAddAllSuggestionsButton","enableCustomizer","withInlineRecommendations","setAddTextAssetCallback","callback","onToggleTextFormatting","onResetTextAssets","assetName","useTextAssetCollectionStyles","root","textAssetStyle","textDivider","hide","TextAssetCollectionWithCoPilotInternal","disableCopilot","shortHeadlineValidations","fetchRecommendationAssets","onChangeTextAssetFormattingSection","cancelFetchRecommendationAssetsJob","shortHeadlineAssetCollection","featureName","minLength","maxLength","TextAssetCollectionWithCoPilot","useDefaultContainerStyles","rowGap","getStyles","_","core","collapseContainer","helpbuttonStyle","url","campaignId","serverContext","shortHeadline","onChangeTexts","helpButtonStyles","useDefaultStyles","locale","CurrentLocale","updatedHeadlineSchema","keys","AssetGroup","properties","Headlines","schema","reduce","acc","key","includes","updatedValue","_defineProperty","updatedAssetGroup","Headline","ValidationGroup","validationProps","onValidate","data","isDirty","isValid","messages","updatedTextAssets","IsOptional","newShortHeadline","Headline0","FinalUrlForRecommendation","CopilotRepositoryProvider","finalUrl","enableLogoAndCTA","recommendationType","propTypes","isAudienceAd","PropTypes","isRequired","func","getLocale","SceneWrapperTextAssetCollectionWithRecommendations","scene","shouldDisplay","onTextListUpdate","metaData","updating","text","textData","index","slice","getTextAssets","textList","textDataList","newText","longHeadlineValidations","descriptionValidations","hideTextFormatting","EditVideoAssetsView","aid","cid","oDataConfig","onTextListChange","onChangeImage","scenes","selectedSceneId","onImageUpdated","onLogoUpdated","onChangeLogo","preferenceService","perfMarker","permissions","recommendedAssets","isLoadingRecommendedAssets","brandKit","isLoadingBrandKit","setTextList","_useState3","_useState4","assetType","setAssetType","_useState5","_useState6","assetIndex","setAssetIndex","_useImagePicker","useImagePicker","displayImagePicker","setDisplayImagePicker","selectedMediaPanelSource","setSelectedMediaPanelSource","currentScene","newImages","currentSceneImages","filter","image","currentSceneLogos","newLogos","logo","hasImages","hasLogos","brandKitImages","images","Array","from","fullUrl","Url","thumbnailSrc","recommendedImageList","ImageAssets","recommendedLogoList","mappedLogos","logos","assets","Logo","isArray","onReplacePreview","ev","type","currentTarget","dataset","onEdit","str","newTextList","_toConsumableArray","onUpdateImageFromRecommendations","imageType","newImageArray","src","newLogoArray","Stack","Item","RecommendedImage","isLoading","previewImage","recommendedImages","maxUploadNum","uiBlocking","seeAllPanelTitle","seeAllLinkText","onEditPreviewImage","onReplacePreviewImage","recommendedLoadingText","title","helpTopic","helpLabel","recommendationTitle","onSelectRecommendedImage","onAddRecommendedImagefromPanel","showViewAllInHeader","hideEditPreviewBtn","sceneImage","classeName","idx","UploadImage","elementType","maxLimit","onSelectImages","imageSrc","styleGuideContainer","styleGuideTitle","fontWeightBold","styleColorTitle","paddingBotton","fontWeightSemibold","colorPalettes","spacingVerticalM","colorNeutralStencil1","flex","spacingVerticalS","header","columnGap","spacingHorizontalXS","content","fontSelect","fontWeightSelect","fontContainer","gridTemplateColumns","gridGap","spacingHorizontalS","contentDivider","spacingVerticalXL","overrideFontWeights","row","flexWrap","FontEditor","onChangeFont","onChangeWeight","fontsState","currentFont","font","currentWeight","FontsFamilySelector","onChange","selectClassName","FontsWeightSelector","ViewName","ColorTypeEnum","keyframeTemplateList","TemplateId","TemplateName","Version","Width","Height","TemplateFileName","Image","AspectRatio","MinHeight","Text","MaxLengthInChar","getActiveTemplate","ColorEditor","onPalettesUpdated","paletteData","palettesState","backgroundPalette","Name","isBrandKitColor","textPalette","selectedColor","colorType","find","c","HexCode","maxColors","palettes","onDeleteColor","colorid","onUpdate","colorObj","AdsStudioDisplayColorPicker","onDelete","EditVideoStyleView","onFontsUpdated","finalPalettes","isEmpty","_finalPalettes","mappedPalettes","palette","push","apply","forEach","some","newState","audioGuideContainer","marginLBottom","audioGuideTitle","audioMusicTitle","audioMusicTitleContainer","audioMusicSelect","audioMusicContainer","getLocalizedAudioName","EditVideoAudioViewImpl","copilotDomainDataService","audioState","setAudioState","selectId","useId","setSelectedValue","isPageLoading","setIsPageLoading","audioList","setAudioList","_useState7","_useState8","isPlaying","setIsPlaying","audioRef","audioSrc","fileName","audioName","formatResponse","response","Data","Audio","AudioName","getAudioObjectFromList","fetchAudioList","_asyncToGenerator","_regeneratorRuntime","mark","_callee","_yield$copilotDomainD","formattedList","wrap","_context","prev","next","getAudioList","sent","abrupt","stop","Overlay","styles","zIndex","AssetLibrarySpinner","useCustomSize","HelpPopupInline","topic","Combobox","onOptionSelect","event","audioObject","optionValue","optionText","pause","load","play","style","border","option","Option","PauseRegular","PlayRegular","ref","EditVideoAudioView","withCopilotDomainDataService","scenePreviewContainer","spacingHorizontalXXXL","scenePreviewImage","maxHeight","ScenePreview","keyFrame","effective","alt","storyBoardView","spacingVerticalMNudge","templateContainer","templateThumbnail","templateText","colorNeutralForeground3","scenesContainer","sceneContainer","sceneTitle","thumbnailsRow","sceneItem","outlineColor","outlineStyle","sceneThumbnail","sceneNumber","verticalAlign","lineHeight","audioBar","navigationContainer","Title","useContext","I18nContext","variant","Scene","sceneId","onSceneSelected","clickFunc","onKeyDown","keyCode","Enter","classNames","role","tabIndex","ScenePickerView","_ref2","TemplateContainer","templateDetail","TemplateThumbnailUrl","LocalizedTemplateName","seconds","Duration","AudioBar","videoMetadata","audio","audioCategory","category","backgroundImage","audioWaveImage","backgroundPosition","backgroundRepeat","MusicNote2Filled","StoryBoardView","_ref3","isSelenium","getParameter","isLocal","getDomain","window","location","href","mock","defaultColor","defaultTextData","mockEditResponse","recommendationId","recommendationFormat","thumbnailUrl","durationInMs","imageData","targetWidth","targetHeight","itemId","logoData","isEqualScene","scene1","scene2","isEqual","omit","isVideoChanged","original","isSceneChanged","useEditVideoAdsViewState","_ref4","videoMetaData","copilotDataService","logger","isCTV","showVideoTemplateSummaryBarControl","_useRecommendations","editVideoAdsAssetRecommendations","generateVideo","video","newVideoMetaData","then","res","ads","catch","fetchAssets","useRecommendations","setScenes","setSelectedSceneId","setVideo","_useState9","_useState10","setFontsState","_useState11","_useState12","setPalettesState","_useState13","_useState14","videoUrl","setVideoUrl","_useState15","_useState16","videoSettings","setVideoSettings","_useState17","_useState18","isGeneratingVideo","setIsGeneratingVideo","_useState19","undefined","_useState20","generateError","setGenerateError","_useState21","_useState22","setRecommendedAssets","_useState23","_useState24","setIsLoadingRecommendedAssets","_useState25","_useState26","copilotRecommendedAssets","setCopilotRecommendedAssets","updateStateFromFetchResponse","_ref5","_ref5$scenes","scenesInner","businessName","scenesWithIds","imageUrl","logoUrl","_extractStylesFromSce","extractStylesFromScenes","fonts","filteredPalettes","videoSettingsInner","RecommendedAssets","assetsObj","finally","logTrace","createStylesRequestObject","_ref6","textColor","_ref7","colors","weight","generateNewVideo","scenesInCall","msg","errors","selectedScene","onScenesUpdated","updatedScenes","updatedFonts","hex","prevState","findIndex","handleGenerateVideo","handleGenerate","textErrorMessages","errorMessages","updatingText","maxLengthOfText","activeTemplate","getTextSizeLimitation","haveTextError","haveErrorInScenes","textErrorForSelectedScene","prevScenes","disableGenerate","EditVideoPageComponent","isOpen","setIsOpen","isDialog","loadClipchampPlayer","onApply","instrumentation","_useNavigationState","useNavigationState","showPreviewVideoModal","noBorderStyle","outline","handleCopilotBannerFetchSucceeded","isDisplayPlus","isMMA","isSignup","skipBusinessNameRecommendation","_useEditVideoAdsViewS","parentContainer","parentElement","onHandleApply","newVideo","handleTextListChange","deepClone","cloneIt","result","selectedSceneTextData","shortHeadlines","ShortHeadlines","cloneCopilotRecommendedAssets","newTheme","Themes","filteredRecommendations","Cta","IsCustomerIdInExclusionList","onCloseVideoPreview","handleSelectNextScene","handleSelectPreviousScene","isPreviousDisabled","isNextDisabled","VideoEditContent","FluentProvider","theme","webLightTheme","PreviewClipchampVideoModal","show","onClose","ChevronLeftRegular","ChevronRightRegular","Send16Regular","MessageBar","messageBarType","MessageBarType","isMultiline","onDismiss","dismissButtonAriaLabel","Drawer","modalType","open","size","separator","DrawerHeader","DrawerHeaderTitle","action","Dismiss24Regular","DrawerBody","DrawerFooter","VideoTemplateEditorWithAddImageWrapperImp","assetLibraryConfig","assetLibraryUserPreferences","assetLibraryAccountPreferences","ianaTimeZone","rest","_objectWithoutProperties","_excluded","setShowAddImagePanel","setMinSizeOfImage","setShowAddLogoPanel","setBrandKit","setIsLoadingBrandKit","setTemplateDetail","InstrumentationContext","onImageAddError","e","errorCode","Code","getImageValidationErrorMessage","useCopilotRepositoryContext","getBrandKits","useBrandKitService","brandKitDataService","fetchBrandKits","_yield$getBrandKits","fetchTemplateDetails","_callee2","templateFilter","_context2","TemplateIds","getVideoTemplates","Templates","t0","minSize","VideoTemplateEditorWithAddImageWrapper","withInstrumentation","withLoggingContext","withRecommendationContext","withDefaultStyles","_ref$palette","extensionEditorStyles","EditVideoPageComponentWithDataServices","withAssetLibraryServicesLoaded","loggerTag","VideoTemplateEditorContextWrapper","isAADUser","isLiteLandingPageEnabled","isAssetLibraryAIGCMVPEnabled","timeZone","preferencesService","activityLogger","dateFormat","useClipchamp","dynamic","VideoTemplateUI","CampaignFetchProvider","accountTimeZone","allowedAssetType","FolderAssetType","defaultIconClass","mergeStyles","getIconClass","colorString","arguments","selectors","svg","fill","padTime","time","floor","toString","padStart","Time","currentTime","duration","durationString","currentTimeString","VideoPureComponent","ariaLabel","muteByDefault","autoPlay","onVideoLoaded","iconColor","showTime","showPlay","customPlayObject","videoElement","volumeVisible","setVolumeVisible","paused","setPaused","muted","setMuted","ended","setEnded","setCurrentTime","setDuration","iconClass","onplay","onpause","onended","ontimeupdate","target","onloadeddata","playIconName","classnames","videoContainer","previewVideo","onLoadedData","Fragment","IconButton","iconProps","iconName","Slider","sliderContainer","min","max","showValue","v","onMouseOver","onFocus","registerIcons","icons","videoPlayBig","viewBox","xmlns","d","videoPause","fillRule","clipRule","videoReplay","videoMute","videoUnmute","prototype","FailedPlaceholder","failed","Icon","placeholderContent","EncodingPlaceholder","encoding","UnverifiedPlaceholder","unverified","commonParentStyles","iconCommonStyles","getPlaceholderStyle","to","transform","animation","borderBottom","FailedPlaceholderWithStyle","EncodingPlaceholderWithStyle","UnverifiedPlaceholderWithStyle","Video","cursor"],"sourceRoot":""}\r\n
\r\n {props.placeholderContent}
\r\n