1 2!function(){try{var e="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof globalThis?globalThis:"undefined"!=typeof self?self:{},n=(new e.Error).stack;n&&(e._sentryDebugIds=e._sentryDebugIds||{},e._sentryDebugIds[n]="0f3ee3e6-3774-5f28-93e9-21bb0182d58b")}catch(e){}}(); 3import { o as __toESM, t as __commonJSMin } from "./rolldown-runtime.D1cXj70v.js"; 4import { L as init_emotion_styled_browser_esm, R as newStyled, X as require_jsx_runtime, dt as require_react, t as require_material } from "./vendor~index~newNavigation~AccountTierManagementPage~AdminContainer~AISystemPromptManager~C~h0mf93xb.B-8UGg7U.js"; 5import { B as require_faExclamationCircle, Gn as v4, Qn as require_dist$2, b as require_Components, n as require_dist$1 } from "./vendor~index~newNavigation~AccountTierManagementPage~AdminContainer~AISystemPromptManager~C~hh2h6ti1.DI0Ezgsb.js"; 6import { a as require_faGripHorizontal, c as require_faBars, d as require_rive } from "./vendor~index~newNavigation~Editor~VideoOverviewPage~ContributorContainer~MainContainer~VideosRouter.DHUljVlH.js"; 7import { E as require_faTrashAlt, h as require_faSparkles$1, m as require_faAngleLeft, t as require_dist$3, x as require_faAngleRight } from "./vendor~index~newNavigation~AccountTierManagementPage~AdminContainer~AISystemPromptManager~S~d59nl763.C6LdGoX3.js"; 8import { t as require_dist$4 } from "./dist.DzcutlwI.js"; 9import { it as getSskyErrorCodeFromGqlError, nt as SskyErrorCode, u as sameArgsDebounce } from "./utils.GooH6I5k.js"; 10import { $ as setNeutralNotification, $d as localRecordingToolMenuAnchorVar, $n as localEditorMediaLibraryGridColumns, Ac as listLanguages, Ah as TimeUtils, An as localEditorDockedMediaLibraryFilterStockOrientation, Br as isFeatureEnabled, Ci as LibraryOpener, Di as MediaLibraryFilterMediaType, Dl as NarratorLibrary, Dn as localEditorDockedMediaLibraryFilterMediaSource, Dr as localEditorUserNameVar, Ei as MediaLibraryFilterMediaSource, En as localEditorDockedMediaLibraryFilterMaxVideoDuration, Fi as PendoService, Fn as localEditorDockedMediaLibraryStockSortOrder, Ft as pathSxProps, G as UploadFileContext, Hd as assetMediaVar, Hs as getDuplicateName, Ii as EnhancedError, J as handleEditorError, K as closeNotification, Kn as localEditorIsPreviewM2Layouts, Kr as getEditorAccountId, Mi as StudioElementOrigin, Mn as localEditorDockedMediaLibrarySelectedItemData, Ni as UploadOrigin, Nn as localEditorDockedMediaLibrarySortBy, Oi as MediaLibrarySortBy, On as localEditorDockedMediaLibraryFilterMediaType, Pn as localEditorDockedMediaLibrarySortDirection, Qg as permissions, Qn as localEditorMediaLibraryDraggingFromFolderId, Rn as localEditorFloatingMediaLibraryCurrentFolderId, Rr as getApolloClient, Si as Libraries, Ti as MediaLibraryFilterMediaOrientation, Tn as localEditorDockedMediaLibraryCurrentFolderId, Un as localEditorIsInReviewVar, Up as convertArrayOfObjectsToObject, Vr as getUserData, Xn as localEditorMediaDragAndDropSnackbarState, Y as handleFileUploadError, Yn as localEditorLivePreviewPendingSetVar, Z as setErrorNotification, Zg as isPermitted, Zn as localEditorMediaLibraryByAudienceCaseIndex, Zs as createPlaceholderDefaultContentAndSettings, _d as videoSizeExceededMsg, _i as AssetGenerationFlowTrigger, _r as localEditorSelectedPlaceholderIdsVar, at as upsertEditorUploadedGettyUrl, br as localEditorShowDropHintFromMediaLibrary, cr as localEditorPublishStateVar, dr as localEditorReviewPanelModeVar, ef as localRecordingToolPermissionsDeniedState, en as localAiMediaGenerationDialogInfo, fd as getImageMaxUploadFileSizeMB, gr as localEditorSelectedNarrationPlaceholderOpenEditVar, hc as getLanguageValue, hd as imageSizeExceededMsg, hf as IGNORE_UPDATED, hn as localEditorAutoOpenReviewPanelVar, hr as localEditorSelectedLibraryVar, it as removeEditorUploadedGettyUrl, jg as illegalFileFormatMsg, jn as localEditorDockedMediaLibrarySearchValue, kg as fileExtByMediaType, ki as MediaLibrarySortDirection, kn as localEditorDockedMediaLibraryFilterMinVideoDuration, ld as AcceptedFileTypes, ll as AvatarSource, md as getVideoMaxUploadFileSizeMB, mf as IGNORE_SERVER_ERRORS, mi as getLocalIdFromGqlId, mr as localEditorSelectedFramePerSceneVar, nf as localRecordingToolState, nr as localEditorPermissionsVar, o as getService, ot as upsertProcessedFile, pr as localEditorSelectedAudioPreview, qg as ReportEventType, qn as localEditorIsSelectedSceneIsNewVar, rr as localEditorPreSelectedLibrary, rt as getProcessedFileIndex, s as getReduxState, sh as EditorLibraryMediaType, so as featureFlagConst, t as getLogReportContent, tf as localRecordingToolSession, tt as setSuccessNotification, ud as audioSizeExceededMsg, ut as AI_VIDEO_DRAFTS_FOLDER_NAME, vc as getNarrationAlternativeVoiceSetting, vn as localEditorCommentsPanelOpenVar, vr as localEditorSelectedPlaceholderOpenEditVar, wi as MediaLibraryActiveTab, wn as localEditorDockedMediaLibraryActiveTab, wr as localEditorSlidesToVideoBrandDisclaimers, xh as deepCloneObj, xi as EditorMediaDragAndDropSnackbarState, xn as localEditorDataConnectorEnabledVar, yl as CommonPlaceholderType, yn as localEditorCopyPlaceholderSuccessVar, yr as localEditorSelectedSceneIdVar, zn as localEditorFloatingMediaLibrarySelectedItemData } from "./logReportUtils.CM1MPldf.js"; 11import { b as init_networkStatus, h as init_lib, m as gql, y as NetworkStatus } from "./vendor~index~newNavigation~AccountTierManagementPage~AdminContainer~AISystemPromptManager~C~lx5ijrxx.Ds2KGt5R.js"; 12import { t as useReactiveVar } from "./useReactiveVar.mh1GCYBn.js"; 13import { Aa as GqlClientGettySortOrder, Ad as useAcquiaDamSubCategoriesQuery, Al as UpdateEditorSelectedMusicDocument, Bc as UndoActionDocument, Bf as useDeleteEditorAssetMediaAndFoldersMutation, Bn as EditorProgramDataConnectorDocument, Ci as GqlClientCcPlaceholderType, Cl as UpdateEditorProgramVersionAspectRatioDocument, Dl as UpdateEditorSceneDocument, Eu as UploadOptimizedEditorAssetMediaDocument, Fa as GqlClientImportSceneProgramIssue, Fr as GqlClientAcquiaAssetType, Ga as GqlClientMoveEditorAssetToFolderResult, Ha as GqlClientMediaOrigin, Ia as GqlClientImportSceneSceneIssue, Jn as EditorProgramViewAnalyticsDocument, Ka as GqlClientMoveEditorFolderToFolderResult, Kp as useEditorStudioElementsQuery, Ks as LocalEditorSceneDocument, Kt as DeleteEditorAssetFolderDocument, Ml as UpdateEditorTtsFullEnablementDocument, Mm as useLocalEditorSceneQuery, Mn as EditorAssetMediaFromUrlUploadedDocument, Mo as GqlClientServiceType, Mr as GqlClientAcquiaAssetOrientation, Nr as GqlClientAcquiaAssetSortBy, O as ClearUndoStackDocument, Ol as UpdateEditorSceneSelectedAnimatedWireframeDocument, Os as GqlClientUploadEditorAssetFromUrlMediaSource, Ou as UpsertUserSettingsDocument, Pn as EditorAssetMediaUploadedDocument, Pr as GqlClientAcquiaAssetSortDirection, Qi as GqlClientDeleteEditorSceneResult, Qs as MoveEditorFolderToFolderDocument, Qt as DeleteEditorSceneDocument, Rl as UpdateMediaLibraryGridColumnsDocument, Rn as EditorExternalAssetMediaUploadedDocument, Ro as GqlClientStatus, Sa as GqlClientFeatureTypeDefinition, Sl as UpdateEditorProgramThemeDocument, Su as UploadEditorAssetMediaFromUrlDocument, Tl as UpdateEditorProgramVersionSourceLanguageDocument, Tn as EditorAccountLevelDataMediaDocument, Tu as UploadExternalEditorAssetVideoDocument, Va as GqlClientMediaClassification, Vc as UndoStacksDocument, Vs as ImportEditorSceneDocument, Wa as GqlClientMoveEditorAssetMediaAndFolderToFolderResult, Xi as GqlClientDeleteEditorAssetFolderResult, Xn as EditorScenesDocument, Xs as MoveEditorAssetMediaAndFoldersToFolderDocument, Yn as EditorSceneLineupDocument, Yr as GqlClientAiAspectRatio, Yt as DeleteEditorLibraryAssetMediaDocument, Zi as GqlClientDeleteEditorAssetMediaResult, Zs as MoveEditorAssetToFolderDocument, _l as UpdateEditorNarrationLibraryDocument, _n as DuplicateEditorSceneInLineupDocument, _u as UpgradeEditorProgramToM2LayoutsDocument, au as UpdateScenePlaceholdersAndAnimatedWireframeDocument, ba as GqlClientExternalSubLibrary, bl as UpdateEditorProgramLifecycleStageDocument, ca as GqlClientEditorNarratorSourceType, cg as useUserSettingsQuery, dl as UpdateEditorAssetMediaDocument, dt as CreateEditorProgramSnapshotDocument, eu as UpdateProjectAudioSettingsDocument, fc as RenameEditorAssetFolderDocument, fi as GqlClientAssetLifecycleStage, fs as GqlClientUpdateEditorProgramLifecycleStageResult, ft as CreateEditorScenesDocument, gl as UpdateEditorLineupDocument, gp as useEditorProgramDataConnectorQuery, gs as GqlClientUpdateEditorSelectedNarratorResult, hl as UpdateEditorIsLiveDocument, i as AccountProgramsScenesDocument, jl as UpdateEditorSelectedNarratorDocument, jr as GqlClientAcquiaAssetMediaType, ka as GqlClientGettyOrientation, kd as useAcquiaDamAssetsQuery, ls as GqlClientUpdateEditorLineupResult, lt as CreateEditorProgramFromPresentationDocument, ma as GqlClientEnumAnimationWireframeCompatibility, mo as GqlClientRenameEditorAssetFolderResult, ms as GqlClientUpdateEditorProgramVersionSourceLanguageResult, nc as ProgramVersionNarrationRecordingStateCalculatedDocument, np as useEditorGettyMediaQuery, oa as GqlClientEditorFlexiblePlaceholderParentType, oc as RecalculateEditorNarrationRecordingStateDocument, pl as UpdateEditorChapteringDocument, ps as GqlClientUpdateEditorProgramThemeResult, qs as LocalEditorSceneWithoutCcDataDocument, rt as CreateEditorAssetFolderDocument, tc as ProgramEditorPublishedDocument, vd as useAccountServiceConnectionsQuery, wh as useRemoveServiceFromAccountMutation, wu as UploadExternalEditorAssetImageDocument, xl as UpdateEditorProgramNameDocument, ya as GqlClientExternalLibrary, za as GqlClientLibraryViewType, zl as UpdateMediaLibraryViewTypeDocument, zn as EditorProgramCreatedFromPresentationDocument } from "./graphqlClient.B8mBnpI6.js"; 14import { Dr as require_lodash, N as require_faCircleQuestion } from "./vendor~index~newNavigation~AccountTierManagementPage~AdminContainer~AISystemPromptManager~C~e5v1w7z6.UinWi66V.js"; 15import { i as require_faXmark, t as require_faInfoCircle } from "./faInfoCircle.D2subuiD.js"; 16import { t as require_faAngleDown } from "./faAngleDown.ByAeCpg0.js"; 17import { t as FontAwesomeIcon } from "./dist.D6-c0JAy.js"; 18import { n as require_faEllipsisVertical, t as require_faEllipsisV } from "./faEllipsisV.BfhkYBLO.js"; 19import { t as require_faArrowLeft } from "./faArrowLeft.D1FHtZ5c.js"; 20import { i as require_faPlug } from "./faShieldCheck.CcsGjb2g.js"; 21import { t as require_faChevronRight } from "./faChevronRight.BJgqEqD2.js";
22import { t as executeBackgroundMutation } from "./backgroundMutation.DKGV3EuZ.js"; 23import { a as convertSystemDynamicElementToDataLibraryDynamicElement, h as isReservedIdWord, i as convertProgramDynamicElementToStudioElement, l as getDataLibraryDataElementsFromProgramVersion, o as convertSystemDynamicElementToStudioElement, p as getSystemElements } from "./studioElement.D5VGWTdg.js"; 24import { F as processUploadAssetMediaInput, T as getPlainTextPlaceholderValueDynamic, d as clientGqlPlaceholderTypeToCommonPlaceholderType, f as getAvatarInfoFromPlaceholder, m as getLibraryAvatarFromPlaceholder, n as handleAssetUploadError$1, o as disableRightClick, s as uploadConcurrently, w as getPlaceholderType } from "./FileUploadUtils.vZ79Z26b.js"; 25import { o as useUserData, r as useActiveAccountId } from "./model.Bjd-XA-x.js"; 26import { n as require_faArrowUpShortWide, r as require_faArrowDownWideShort } from "./faPaperPlane.BGGODIHD.js"; 27import { n as ChevronLeft_default, t as ChevronRight_default } from "./ChevronRight.DJqyIUqj.js"; 28import { r as useEditorAccountUserName } from "./useEditorAccountUsers.CdrFk1yF.js"; 29import { n as useEditorProgramId } from "./useEditorProgramId.Dd4mgJ02.js"; 30import { d as isAiFeatureBlocked, i as require_faCloudArrowUp, l as tabSxProps, u as tabsSxProps } from "./faImage.C9MuexWZ.js"; 31import { c as useAccountFeatureFullData } from "./faFilm.jyVz-u3H.js"; 32import { t as safePlayMedia } from "./mediaUtils.BqcrtZqT.js"; 33import { c as truncate, s as removeFileExtension, t as durationToString } from "./general.BICOombh.js"; 34import { G as useDropzone } from "./DataLibraryUtils.DQK2Izwq.js"; 35import { t as TruffleCircularProgress } from "./TruffleCircularProgress.C8BTwqVq.js"; 36import { o as openArticleInHelpCenter, t as InAppHelpCenterTrackingSource } from "./helpCenter.e5lvYEgl.js"; 37import { a as useLearnMoreButton } from "./useEditHelpCenter.CASZeVyx.js"; 38//#region client/components/editor/Nooks/CopyPlaceholderSuccess/copyPlaceholderSuccess.ts 39var import_react = /* @__PURE__ */ __toESM(require_react()); 40var import_dist$4 = require_dist$4(); 41var import_lodash = require_lodash(); 42var import_jsx_runtime = require_jsx_runtime(); 43init_emotion_styled_browser_esm(); 44var import_material = require_material(); 45var import_faExclamationCircle = require_faExclamationCircle(); 46var import_faXmark = require_faXmark(); 47var import_faInfoCircle = require_faInfoCircle(); 48var import_faCircleQuestion = require_faCircleQuestion(); 49var import_faAngleDown = require_faAngleDown(); 50var import_faTrashAlt = require_faTrashAlt(); 51var import_faAngleRight = require_faAngleRight(); 52var import_faSparkles = require_faSparkles$1(); 53var import_faAngleLeft = require_faAngleLeft(); 54var import_dist$3 = require_dist$3(); 55var import_faArrowLeft = require_faArrowLeft(); 56var import_faBars = require_faBars(); 57var import_faChevronRight = require_faChevronRight(); 58var import_faEllipsisVertical = require_faEllipsisVertical(); 59var import_faEllipsisV = require_faEllipsisV(); 60var import_faGripHorizontal = require_faGripHorizontal(); 61var import_faPlug = require_faPlug(); 62var triggerCopyPlaceholderSuccess = () => { 63 localEditorCopyPlaceholderSuccessVar(Date.now()); 64}; 65var clearCopyPlaceholderSuccess = () => { 66 localEditorCopyPlaceholderSuccessVar(null); 67}; 68//#endregion 69//#region client/components/editor/Nooks/DocumentToVideo/slidesToVideo.ts 70function createVideoFromSlides(file, onProgress, onFailure, onSuccess) { 71 const mutationId = v4(); 72 executeBackgroundMutation({ 73 mutation: CreateEditorProgramFromPresentationDocument, 74 variables: { 75 input: { file }, 76 mutationId 77 } 78 }, { 79 query: EditorProgramCreatedFromPresentationDocument, 80 variables: { mutationId } 81 }, { 82 onProgress, 83 onFailure, 84 onSuccess 85 }, mutationId); 86} 87function addBrandDisclaimer(programId, reusedBrand) { 88 localEditorSlidesToVideoBrandDisclaimers({ 89 ...localEditorSlidesToVideoBrandDisclaimers(), 90 [programId]: reusedBrand 91 }); 92} 93function removeBrandDisclaimer(programId) { 94 const current = structuredClone(localEditorSlidesToVideoBrandDisclaimers()); 95 delete current[programId]; 96 localEditorSlidesToVideoBrandDisclaimers(current); 97} 98function hasBrandDisclaimer(programId) { 99 return programId in localEditorSlidesToVideoBrandDisclaimers(); 100} 101//#endregion 102//#region client/components/editor/Components/TruffleEditingWorkSpace/Components/BottomContainer/ScenesLineup/utils.ts 103var AddSwitchSceneBaseDialogClient = /* @__PURE__ */ function(AddSwitchSceneBaseDialogClient) { 104 AddSwitchSceneBaseDialogClient["SWITCH_SCENE_TEMPLATE"] = "Switch scene template"; 105 AddSwitchSceneBaseDialogClient["ADD_SCENE"] = "Add scene"; 106 return AddSwitchSceneBaseDialogClient; 107}({}); 108var isRelevantAnimatedWireframe = (animatedWireframe, aspectRatio, themeId, isTestAccount, programVersionSupportsLayoutsM2) => { 109 return animatedWireframe.aspectRatio === aspectRatio && animatedWireframe.theme.id === themeId && (animatedWireframe.lifecycleStage === GqlClientAssetLifecycleStage.ACTIVE || isTestAccount && animatedWireframe.lifecycleStage === GqlClientAssetLifecycleStage.TEST) && !animatedWireframe.name.includes("_media_tags") && (programVersionSupportsLayoutsM2 && animatedWireframe.compatibility === GqlClientEnumAnimationWireframeCompatibility.M2 || !programVersionSupportsLayoutsM2 && animatedWireframe.compatibility !== GqlClientEnumAnimationWireframeCompatibility.M2); 110}; 111var isRelevantWireframe = (wireframe, isTestAccount, relevantCategories) => { 112 const lifecycleStageRelevant = wireframe.lifecycleStage === GqlClientAssetLifecycleStage.ACTIVE || isTestAccount; 113 const categoryRelevant = relevantCategories.includes(wireframe.category); 114 return lifecycleStageRelevant && categoryRelevant; 115}; 116var isDiscontinuedAnimatedWireframe = (animatedWireframe) => { 117 return animatedWireframe?.lifecycleStage === GqlClientAssetLifecycleStage.REMOVED; 118}; 119var animatedWireframeContainsCanvas = (animatedWireframe) => { 120 return animatedWireframe.placeholdersSettings.some((ps) => ps.canvasName); 121}; 122var getAnimatedWireframePlaceholderSettings = (animatedWireframe, ccPlaceholderId) => { 123 return animatedWireframe.placeholdersSettings.find((ps) => ps["ccPlaceholder"]?.id === ccPlaceholderId); 124}; 125var placeholderHasCanvasInAnimatedWireframe = (animatedWireframe, ccPlaceholderId) => { 126 return !!getAnimatedWireframePlaceholderSettings(animatedWireframe, ccPlaceholderId)?.canvasName; 127}; 128//#endregion 129//#region client/components/editor/Nooks/LivePreview/livePreview.ts 130var reportPending = (id, pending) => { 131 const pendingSet = new Set(localEditorLivePreviewPendingSetVar()); 132 if (pending) pendingSet.add(id); 133 else pendingSet.delete(id); 134 localEditorLivePreviewPendingSetVar(pendingSet); 135}; 136var wireframePlaceholderToScenePlaceholderConverter = (animatedWireframe) => { 137 return (ccPlaceholder) => { 138 const hasCanvas = placeholderHasCanvasInAnimatedWireframe(animatedWireframe, ccPlaceholder.id); 139 const { defaultContent, defaultSettings } = createPlaceholderDefaultContentAndSettings({ 140 phType: clientGqlPlaceholderTypeToCommonPlaceholderType(ccPlaceholder.intent.type), 141 defaultTextValue: ccPlaceholder.intent.defaultTextValue, 142 defaultMediaValue: ccPlaceholder.intent.defaultMediaValue, 143 intentName: ccPlaceholder.intent.name, 144 isFlexible: hasCanvas, 145 additionalLanguages: [], 146 onScreenTextLanguages: [] 147 }); 148 const placeholderSettings = getAnimatedWireframePlaceholderSettings(animatedWireframe, ccPlaceholder.id); 149 return { 150 id: ccPlaceholder.id, 151 placeholderContent: defaultContent, 152 placeholderSettings: defaultSettings, 153 ccPlaceholder, 154 parentType: hasCanvas ? GqlClientEditorFlexiblePlaceholderParentType.CANVAS : null, 155 flexibleSettings: hasCanvas ? { 156 top: placeholderSettings.top, 157 left: placeholderSettings.left, 158 width: placeholderSettings.width, 159 height: placeholderSettings.height 160 } : null 161 }; 162 }; 163}; 164//#endregion 165//#region client/components/editor/Nooks/Scene/scene.ts 166var addScenes = async (programVersionId, animatedWireframeId, colorCombination, lineupIndex) => { 167 const { mutate } = getApolloClient(); 168 const mutationOutput = await mutate({ 169 mutation: CreateEditorScenesDocument, 170 variables: { input: { 171 editorProgramVersionId: programVersionId, 172 editorScenes: [{ 173 ccAnimatedWireframeId: animatedWireframeId, 174 colorCombination 175 }], 176 lineupIndex 177 } } 178 }); 179 const targetSceneId = mutationOutput.data.createEditorScenes.editorScenes[0].id; 180 selectScene(targetSceneId); 181 return mutationOutput.data; 182}; 183var duplicateSceneInLineup = async (programId, programVersionId, sourceSce
183neId, sourceSceneName) => { 184 const { mutate } = getApolloClient(); 185 const livePreviewPendingId = v4(); 186 reportPending(livePreviewPendingId, true); 187 const sourceSceneIndex = getProjectLineup(programId, programVersionId).findIndex((sceneId) => sceneId === sourceSceneId); 188 const targetSceneName = getDuplicateName(sourceSceneName, getScenes(programId, programVersionId).map((scene) => scene.name.toLowerCase())); 189 const { data: { duplicateEditorSceneInLineup: { editorScene } } } = await mutate({ 190 mutation: DuplicateEditorSceneInLineupDocument, 191 variables: { input: { 192 sourceSceneId, 193 targetSceneLineupIndex: sourceSceneIndex + 1, 194 targetSceneName 195 } } 196 }); 197 const targetSceneId = editorScene.id; 198 selectScene(targetSceneId); 199 reportPending(livePreviewPendingId, false); 200 PendoService.getInstance().trackEvent("Duplicate scene", { 201 originVideoId: programId, 202 originSceneId: sourceSceneId, 203 targetVideoId: programId, 204 targetSceneId: editorScene.id || "" 205 }); 206 return editorScene; 207}; 208var importEditorScene = async (programId, programVersionId, sourceSceneId, programLevelIssues, sceneLevelIssues, dataLibraryResolution) => { 209 const { mutate } = getApolloClient(); 210 const projectSelectedSceneId = getSelectedSceneId(); 211 const projectLineup = getProjectLineup(programId, programVersionId); 212 const sourceSceneIndex = projectLineup.findIndex((sceneId) => sceneId === projectSelectedSceneId); 213 let followingTargetSceneId = void 0; 214 if (sourceSceneIndex >= 0 && sourceSceneIndex < projectLineup.length - 1) followingTargetSceneId = projectLineup[sourceSceneIndex + 1]; 215 const { data: { importEditorScene: { editorScene } } } = await mutate({ 216 mutation: ImportEditorSceneDocument, 217 variables: { input: { 218 targetProgramVersionId: programVersionId, 219 sourceSceneId, 220 followingSceneId: followingTargetSceneId, 221 dataLibraryResolution 222 } } 223 }); 224 const targetSceneId = editorScene.id; 225 selectScene(targetSceneId); 226 PendoService.getInstance().trackEvent("Scene imported", { 227 originVideoID: sourceSceneId.split("|")[0], 228 originSceneID: sourceSceneId.split("|").pop(), 229 targetVideoID: programId, 230 targetSceneID: editorScene?.id?.split("|")?.pop(), 231 brandMismatch: String(programLevelIssues.has(GqlClientImportSceneProgramIssue.DIFFERENT_BRAND)), 232 voiceMismatch: String(programLevelIssues.has(GqlClientImportSceneProgramIssue.DIFFERENT_VIDEO_VOICE)), 233 humanNarratorMismatch: String(programLevelIssues.has(GqlClientImportSceneProgramIssue.HUMAN_NARRATOR)), 234 avatarVoiceMismatch: String(sceneLevelIssues.has(GqlClientImportSceneSceneIssue.AVATAR_VOICE_WITHOUT_AVATAR)), 235 aspectRatioMismatch: String(programLevelIssues.has(GqlClientImportSceneProgramIssue.DIFFERENT_ASPECT_RATIO)), 236 themeMismatch: String(programLevelIssues.has(GqlClientImportSceneProgramIssue.DIFFERENT_THEME)), 237 customBackgroundMismatch: String(programLevelIssues.has(GqlClientImportSceneProgramIssue.DIFFERENT_CUSTOM_BACKGROUND)) 238 }); 239 return editorScene; 240}; 241var getScenes = (programId, programVersionId) => { 242 return getApolloClient().cache.readQuery({ 243 query: EditorScenesDocument, 244 variables: { 245 programId, 246 programVersionId 247 } 248 }).editorProgram.programVersion.scenes; 249}; 250var removeScene = (programId, programVersionId, sceneId) => { 251 const projectSelectedSceneId = getSelectedSceneId(); 252 const projectLineup = getProjectLineup(programId, programVersionId); 253 const selectedSceneIndex = projectLineup.findIndex((sceneId) => sceneId === projectSelectedSceneId); 254 const newProjectLineup = projectLineup.filter((lineupSceneId) => lineupSceneId !== sceneId); 255 const newScenes = getScenes(programId, programVersionId).filter((scene) => scene.id !== sceneId); 256 if (sceneId === projectSelectedSceneId) selectScene(newProjectLineup[Math.min(selectedSceneIndex, newProjectLineup.length - 1)] || null); 257 return deleteScene(sceneId, programVersionId, newProjectLineup, newScenes); 258}; 259var deleteScene = async (sceneId, programVersionId, sceneLineup, scenes) => { 260 try { 261 const { mutate } = getApolloClient(); 262 await mutate({ 263 mutation: DeleteEditorSceneDocument, 264 variables: { input: { sceneId } }, 265 optimisticResponse: { 266 __typename: "Mutation", 267 deleteEditorScene: { 268 __typename: "DeleteEditorSceneOutput", 269 result: GqlClientDeleteEditorSceneResult.SUCCESS, 270 editorProgramVersion: { 271 __typename: "EditorProgramVersion", 272 id: programVersionId, 273 sceneLineup, 274 scenes 275 } 276 } 277 } 278 }); 279 } catch (e) {} 280}; 281var selectScene = (sceneId, isNewScene = false) => { 282 setIsSelectedSceneIsNew(isNewScene); 283 setSelectedSceneId(sceneId); 284 setSelectedPlaceholderIds([]); 285}; 286var selectFrame = (sceneId, frameIndex) => { 287 localEditorSelectedFramePerSceneVar({ 288 ...localEditorSelectedFramePerSceneVar(), 289 [sceneId]: frameIndex 290 }); 291 setSelectedPlaceholderIds([]); 292}; 293var getScene = (sceneId) => { 294 if (!sceneId) return null;
295 return getApolloClient().cache.readQuery({ 296 query: LocalEditorSceneDocument, 297 variables: { sceneId } 298 }).localEditorScene; 299}; 300var getSceneWithoutCcData = (sceneId) => { 301 if (!sceneId) return null; 302 return getApolloClient().cache.readQuery({ 303 query: LocalEditorSceneWithoutCcDataDocument, 304 variables: { sceneId } 305 }).localEditorScene; 306}; 307var updateScene = (updateSceneInput) => { 308 getApolloClient().mutate({ 309 mutation: UpdateEditorSceneDocument, 310 variables: { updateEditorSceneInput: { 311 id: updateSceneInput.id, 312 name: updateSceneInput.name, 313 description: updateSceneInput.description, 314 skipSceneMode: updateSceneInput.skipSceneMode, 315 skipSceneAudience: updateSceneInput.skipSceneAudience, 316 colorCombination: updateSceneInput.colorCombination, 317 buttonAlignment: updateSceneInput.buttonAlignment, 318 minimumDuration: updateSceneInput.minimumDuration, 319 hasTransition: updateSceneInput.hasTransition, 320 updated: IGNORE_UPDATED 321 } } 322 }); 323}; 324var updateScenePlaceholdersAndAnimatedWireframe = (input) => { 325 return getApolloClient().mutate({ 326 mutation: UpdateScenePlaceholdersAndAnimatedWireframeDocument, 327 variables: { input: { 328 ...input, 329 updated: IGNORE_UPDATED 330 } } 331 }).catch(() => {}); 332}; 333var selectLayout = (input) => { 334 getApolloClient().mutate({ 335 mutation: UpdateEditorSceneSelectedAnimatedWireframeDocument, 336 variables: { input: { 337 sceneId: input.sceneId, 338 themeId: input.themeId, 339 animatedWireframeId: input.animatedWireframeId, 340 updated: IGNORE_UPDATED 341 } } 342 }); 343}; 344var refreshAccountProgramsScenes = () => { 345 getApolloClient().query({ 346 query: AccountProgramsScenesDocument, 347 variables: {}, 348 fetchPolicy: "network-only" 349 }); 350}; 351//#endregion 352//#region client/components/editor/Nooks/Project/project.ts 353var setProjectLineup = async (programVersionId, projectLineup, optimistic) => { 354 try { 355 const { mutate } = getApolloClient(); 356 let options = { 357 mutation: UpdateEditorLineupDocument, 358 variables: { 359 input: { 360 editorProgramVersionId: programVersionId, 361 sceneLineup: projectLineup 362 }, 363 [IGNORE_SERVER_ERRORS]: true 364 } 365 }; 366 if (optimistic) options.optimisticResponse = { 367 __typename: "Mutation", 368 updateEditorLineup: { 369 __typename: "UpdateEditorLineupOutput", 370 result: GqlClientUpdateEditorLineupResult.SUCCESS, 371 editorProgramVersion: { 372 id: programVersionId, 373 __typename: "EditorProgramVersion", 374 sceneLineup: projectLineup 375 } 376 } 377 }; 378 await mutate(options); 379 } catch (e) {} 380}; 381var getProjectLineup = (programId, programVersionId) => { 382 return getApolloClient().cache.readQuery({ 383 query: EditorSceneLineupDocument, 384 variables: { 385 programId, 386 programVersionId 387 } 388 }).editorProgram.programVersion.sceneLineup; 389}; 390var setProjectSelectedMusicId = (programVersionId, selectedMusicId, selectedMusicSource) => { 391 getApolloClient().mutate({ 392 mutation: UpdateEditorSelectedMusicDocument, 393 variables: { updateEditorSelectedMusicInput: { 394 editorProgramVersionId: programVersionId, 395 selectedMusicId, 396 selectedMusicSource 397 } } 398 }); 399}; 400var setEditorTtsFullEnablement = (programVersionId, isEnabled) => { 401 getApolloClient().mutate({ 402 mutation: UpdateEditorTtsFullEnablementDocument, 403 variables: { updateEditorTtsFullEnablementInput: { 404 editorProgramVersionId: programVersionId, 405 isEnabled, 406 updated: IGNORE_UPDATED 407 } } 408 }).catch(() => {}); 409}; 410var setSelectedAudioPreview = (audioEl) => { 411 localEditorSelectedAudioPreview(audioEl); 412}; 413var setProjectSelectedNarrator = async (programVersionId, selectedNarratorId, narratorSourceType) => { 414 const client = getApolloClient(); 415 const isCCNarrator = narratorSourceType === GqlClientEditorNarratorSourceType.CC; 416 const selectedAccountNarrator = isCCNarrator ? null : { 417 __typename: "EditorAccountLevelNarrator", 418 id: selectedNarratorId 419 }; 420 const selectedNarrator = isCCNarrator ? { 421 __typename: "CcNarrator", 422 id: selectedNarratorId 423 } : null; 424 const optimisticResponse = { 425 __typename: "Mutation", 426 updateEditorSelectedNarrator: { 427 __typename: "UpdateEditorSelectedNarratorOutput", 428 result: GqlClientUpdateEditorSelectedNarratorResult.SUCCESS, 429 editorProgramVersion: { 430 __typename: "EditorProgramVersion", 431 id: programVersionId, 432 selectedAccountNarrator, 433 selectedNarrator, 434 selectedNarratorSource: narratorSourceType 435 } 436 } 437 }; 438 await client.mutate({ 439 mutation: UpdateEditorSelectedNarratorDocument, 440 variables: { updateEditorSelectedNarratorInput: { 441 editorProgramVersionId: programVersionId, 442 selectedNarratorId, 443 narratorSource: narratorSourceType 444 } }, 445 optimisticResponse 446 }).catch(); 447}; 448var setSelectedSceneId = (sceneId) => { 449 localEditorSelectedSceneIdVar(sceneId); 450}; 451var setIsSelectedSceneIsNew = (isNewScene) => { 452 localEditorIsSelectedSceneIsNewVar(isNewScene); 453}; 454var setSelectedPlaceholderIds = (placeholderIds) => { 455 localEditorSelectedPlaceholderIdsVar(placeholderIds); 456 clearCopyPlaceholderSuccess(); 457}; 458var setSelectedPlaceholderOpenEdit = (isOpen) => { 459 localEditorSelectedPlaceholderOpenEditVar(isOpen); 460}; 461var setSelectedNarrationPlaceholderOpenEdit = (isOpen) => { 462 localEditorSelectedNarrationPlaceholderOpenEditVar(isOpen); 463}; 464var getSelectedSceneId = () => { 465 return localEditorSelectedSceneIdVar(); 466}; 467var updateEditorNarrationLibrary = (programVersionId) => { 468 const { mutate } = getApolloClient(); 469 return mutate({ 470 mutation: UpdateEditorNarrationLibraryDocument, 471 variables: { input: { editorProgramVersionId: programVersionId } } 472 }); 473}; 474var setEditorPermissions = (userRoles) => { 475 const canOnlyViewProgram = isPermitted(userRoles, permissions.getEditorPrograms) && !isPermitted(userRoles, permissions.editEditorPrograms); 476 const canCreateEditorProgram = isPermitted(userRoles, permissions.createEditorPrograms); 477 const canEditEditorProgram = isPermitted(userRoles, permissions.editEditorPrograms); 478 const canEditBrandConfiguration = isPermitted(userRoles, permissions.editBrandConfigurations); 479 localEditorPermissionsVar({ 480 canCreateEditorProgram, 481 canEditEditorProgram, 482 canOnlyViewProgram, 483 canEditViewerProfiles: isPermitted(userRoles, permissions.editViewerProfiles), 484 canGenerateVideoLinks: isPermitted(userRoles, permissions.generateVideoLinks), 485 canGenerateVideoLinksProd: isPermitted(userRoles, permissions.generateVideoLinksProd), 486 canEditLandingPageBuilderApiGateway: isPermitted(userRoles, permissions.editLandingPageBuilderApiGateway), 487 canEditVideo: canCreateEditorProgram || canEditEditorProgram || canEditBrandConfiguration, 488 canUpdateCustomConnector: isPermitted(userRoles, permissions.editEditorCustomIntegrations) 489 }); 490};
491var setEditorIsInReview = (isInReview) => { 492 localEditorIsInReviewVar(isInReview); 493}; 494var setEditorAutoOpenReviewPanel = (autoOpen) => { 495 localEditorAutoOpenReviewPanelVar(autoOpen); 496}; 497var setEditorCommentsPanelOpen = (open) => { 498 localEditorCommentsPanelOpenVar(open); 499}; 500var setEditorReviewPanelMode = (mode) => { 501 localEditorReviewPanelModeVar(mode); 502}; 503var getEditorDataConnectorEnabled = () => { 504 return localEditorDataConnectorEnabledVar(); 505}; 506var setProjectAudioSettings = (programVersionId, audioSettings) => { 507 getApolloClient().mutate({ 508 mutation: UpdateProjectAudioSettingsDocument, 509 variables: { updateProjectAudioSettingsInput: { 510 editorProgramVersionId: programVersionId, 511 audioSettings 512 } } 513 }); 514}; 515var updateEditorProgramName = async (programId, programName) => { 516 const { mutate } = getApolloClient(); 517 return mutate({ 518 mutation: UpdateEditorProgramNameDocument, 519 variables: { input: { 520 programId, 521 updated: IGNORE_UPDATED, 522 name: programName 523 } } 524 }); 525}; 526var updateEditorProgramLifecycleStage = async (programId, lifecycleStage) => { 527 const { mutate } = getApolloClient(); 528 return mutate({ 529 mutation: UpdateEditorProgramLifecycleStageDocument, 530 variables: { input: { 531 id: programId, 532 updated: IGNORE_UPDATED, 533 lifecycleStage 534 } } 535 }); 536}; 537var navigateToEditVideo = (history, accountId, programId) => { 538 history.push((0, import_dist$4.newNavEditorPath)({ 539 accountId, 540 videoId: programId 541 })); 542}; 543var onEditCopilotVideo = async (programId, isSlidesToVideo) => { 544 if ((await updateEditorProgramLifecycleStage(programId, GqlClientAssetLifecycleStage.ENABLED))?.data?.updateEditorProgramLifecycleStage?.result === GqlClientUpdateEditorProgramLifecycleStageResult.SUCCESS) { 545 setSuccessNotification({ 546 message: `Video moved from ${AI_VIDEO_DRAFTS_FOLDER_NAME} folder to Video Library page`, 547 showCloseButton: true, 548 duration: 10 * 1e3 549 }); 550 if (isSlidesToVideo && hasBrandDisclaimer(programId)) setPreSelectedLibrary({ 551 library: Libraries.BrandsPanel, 552 opener: LibraryOpener.DocToVideo 553 }); 554 } else handleEditorError({ 555 error: /* @__PURE__ */ new Error(`Failed to move video from ${AI_VIDEO_DRAFTS_FOLDER_NAME} to Video Library page`), 556 sskyCode: SskyErrorCode.UnexpectedServerError 557 }); 558}; 559function getEditorPublishState() { 560 return localEditorPublishStateVar(); 561} 562var setEditorPublishState = (publishState) => { 563 localEditorPublishStateVar(publishState); 564}; 565var updateEditorChaptering = (editorProgramVersionId, chapteringEnabled) => { 566 getApolloClient().mutate({ 567 mutation: UpdateEditorChapteringDocument, 568 variables: { updateEditorChapteringInput: { 569 editorProgramVersionId, 570 chapteringEnabled, 571 updated: IGNORE_UPDATED 572 } } 573 }); 574}; 575var updateEditorProgramThemeId = async (programId, programVersionId, programThemeId) => { 576 const scenes = getScenes(programId, programVersionId); 577 const { mutate } = getApolloClient(); 578 await mutate({ 579 mutation: UpdateEditorProgramThemeDocument, 580 variables: { input: { 581 programVersionId, 582 updated: IGNORE_UPDATED, 583 theme: programThemeId 584 } }, 585 optimisticResponse: { 586 __typename: "Mutation", 587 updateEditorProgramTheme: { 588 __typename: "UpdateEditorProgramThemeOutputSuccess", 589 result: GqlClientUpdateEditorProgramThemeResult.SUCCESS, 590 editorProgramVersion: { 591 id: programVersionId, 592 __typename: "EditorProgramVersion", 593 ccTheme: { 594 id: programThemeId, 595 __typename: "CcTheme" 596 }, 597 scenes 598 } 599 } 600 } 601 }).catch(() => {}); 602}; 603var updateEditorProgramVersionAspectRatio = async (programVersionId, aspectRatio) => { 604 const { mutate } = getApolloClient(); 605 const output = (await mutate({ 606 mutation: UpdateEditorProgramVersionAspectRatioDocument, 607 variables: { input: { 608 id: programVersionId, 609 aspectRatio, 610 updated: IGNORE_UPDATED 611 } } 612 }).catch(() => void 0))?.data?.updateEditorProgramVersionAspectRatio; 613 return output?.__typename === "UpdateEditorProgramVersionAspectRatioOutputSuccess" ? output.autoShrunkBullets ?? [] : []; 614}; 615var updateEditorProgramVersionSourceLanguage = async (programVersionId, sourceLanguage, optionalNarrator) => { 616 const { mutate } = getApolloClient(); 617 const input = { 618 id: programVersionId, 619 updated: IGNORE_UPDATED, 620 sourceLanguage, 621 narrator: optionalNarrator 622 }; 623 const optimisticResponse = { 624 __typename: "Mutation", 625 updateEditorProgramVersionSourceLanguage: { 626 __typename: "UpdateEditorProgramVersionSourceLanguageOutputSuccess", 627 result: GqlClientUpdateEditorProgramVersionSourceLanguageResult.SUCCESS, 628 programVersion: { 629 __typename: "EditorProgramVersion", 630 id: programVersionId, 631 sourceLanguage, 632 defaultLanguage: sourceLanguage 633 } 634 } 635 }; 636 await mutate({ 637 mutation: UpdateEditorProgramVersionSourceLanguageDocument, 638 variables: { input }, 639 optimisticResponse 640 }).catch(() => {}); 641}; 642var publishEditorProgram = async (programId, programVersionId, onProgress, onFailure, onSuccess) => { 643 setEditorPublishState({ 644 publishStatus: GqlClientStatus.PENDING, 645 progress: 0 646 });
647 return executeBackgroundMutation({ 648 mutation: CreateEditorProgramSnapshotDocument, 649 variables: { input: { editorProgramVersionId: programVersionId } } 650 }, { 651 query: ProgramEditorPublishedDocument, 652 variables: { programId } 653 }, { 654 onProgress, 655 onFailure, 656 onSuccess 657 }).catch((e) => { 658 setEditorPublishState(null); 659 throw e; 660 }); 661}; 662var getEditorIsPreviewM2 = () => { 663 return localEditorIsPreviewM2Layouts(); 664}; 665var setEditorIsPreviewM2 = (isPreviewM2) => { 666 localEditorIsPreviewM2Layouts(isPreviewM2); 667}; 668var setPreSelectedLibrary = (value) => { 669 localEditorPreSelectedLibrary(value); 670}; 671var upgradeEditorProgramToM2Layouts = (programVersionId) => { 672 const { mutate } = getApolloClient(); 673 return mutate({ 674 mutation: UpgradeEditorProgramToM2LayoutsDocument, 675 variables: { input: { 676 editorProgramVersionId: programVersionId, 677 allowPartialMapping: false 678 } } 679 }); 680}; 681var recalculateEditorNarrationRecordingState = async (programVersionId, onFailure, onSuccess) => { 682 return executeBackgroundMutation({ 683 mutation: RecalculateEditorNarrationRecordingStateDocument, 684 variables: { input: { editorProgramVersionId: programVersionId } } 685 }, { 686 query: ProgramVersionNarrationRecordingStateCalculatedDocument, 687 variables: { programVersionId } 688 }, { 689 onProgress: null, 690 onFailure, 691 onSuccess 692 }); 693}; 694var ChangeProgramToLiveContext = /* @__PURE__ */ function(ChangeProgramToLiveContext) { 695 ChangeProgramToLiveContext["VIDEO_PAGE_BANNER"] = "video page banner"; 696 ChangeProgramToLiveContext["ANALYZE_TAB"] = "analyze tab"; 697 return ChangeProgramToLiveContext; 698}({}); 699async function changeProgramToLive(programId, context, previousStatus) { 700 const client = getApolloClient(); 701 await client.mutate({ 702 mutation: UpdateEditorIsLiveDocument, 703 variables: { input: { programId } } 704 }); 705 client.query({ 706 query: EditorProgramViewAnalyticsDocument, 707 variables: { programId } 708 }).then((response) => { 709 PendoService.getInstance().trackEvent("Video changed to live", { 710 context, 711 previousStatus, 712 totalViews: `${response.data?.editorProgramViewAnalytics?.totalViews}` 713 }); 714 }); 715} 716//#endregion 717//#region client/components/editor/Nooks/UndoAction/undoAction.ts 718var undoLastAction = async (trigger) => { 719 const fetchOptions = { 720 query: UndoStacksDocument, 721 variables: {} 722 }; 723 const { data: undoData } = await getApolloClient().query(fetchOptions); 724 if (!undoData?.undoStacks?.undoStackSize) return; 725 reportUndoRedo("undo", trigger, undoData); 726 const { data } = await getApolloClient().mutate({ 727 mutation: UndoActionDocument, 728 variables: { undoActionInput: { isUndo: true } } 729 }); 730 showNotification("Undo", data.undoAction.message); 731 return data; 732}; 733var redoLastAction = async (trigger) => { 734 const fetchOptions = { 735 query: UndoStacksDocument, 736 variables: {} 737 }; 738 const { data: undoData } = await getApolloClient().query(fetchOptions); 739 if (!undoData?.undoStacks?.redoStackSize) return; 740 reportUndoRedo("redo", trigger, undoData); 741 const { data } = await getApolloClient().mutate({ 742 mutation: UndoActionDocument, 743 variables: { undoActionInput: { isUndo: false } } 744 }); 745 showNotification("Redo", data.undoAction.message); 746 return data; 747}; 748function reportUndoRedo(type, trigger, undoData) { 749 const undoStackSize = undoData.undoStacks.undoStackSize || 0; 750 const redoStackSize = undoData.undoStacks.redoStackSize || 0; 751 const action = `${type} ${(type === "undo" ? undoData.undoStacks.firstUndoActionName : undoData.undoStacks.firstRedoActionName) || "N/A"}`; 752 const eventName = "Undo Redo"; 753 const eventData = { 754 name: eventName, 755 type, 756 trigger, 757 action, 758 undoStackSize: undoStackSize.toString(), 759 redoStackSize: redoStackSize.toString() 760 }; 761 PendoService.getInstance().trackEvent(eventName, eventData); 762} 763var showNotification = (action, message) => { 764 if (!message) return; 765 setNeutralNotification({ 766 message: `${action} applied to ${message}`, 767 showCloseButton: true, 768 icon: false 769 }); 770}; 771var clearUndoStack = async () => { 772 await getApolloClient().mutate({ mutation: ClearUndoStackDocument }); 773}; 774//#endregion 775//#region client/components/editor/Components/TruffleEditingWorkSpace/utils/undoKeyboardUtils.ts 776var isMac = () => { 777 return navigator.platform?.toLowerCase()?.includes("mac") || navigator.userAgentData?.platform?.includes("macos"); 778}; 779var handleUndoKeyboardShortcuts = (event, disableUndo, customUndo, customRedo) => { 780 if (isMac()) { 781 if (event.metaKey && !event.ctrlKey && !event.altKey && event.key.toLowerCase() === "z") if (event.shiftKey) if (disableUndo) event.stopPropagation(); 782 else customRedo ? customRedo() : redoLastAction("keyboard").cat
782ch(() => {}); 783 else if (disableUndo) event.stopPropagation(); 784 else customUndo ? customUndo() : undoLastAction("keyboard").catch(() => {}); 785 } else if (event.ctrlKey && !event.metaKey && !event.altKey) { 786 if (event.shiftKey && event.key.toLowerCase() === "z" || !event.shiftKey && event.key.toLowerCase() === "y") if (disableUndo) event.stopPropagation(); 787 else customRedo ? customRedo() : redoLastAction("keyboard").catch(() => {}); 788 else if (!event.shiftKey && event.key.toLowerCase() === "z") if (disableUndo) event.stopPropagation(); 789 else customUndo ? customUndo() : undoLastAction("keyboard").catch(() => {}); 790 } 791}; 792var overrideUndoKeyboardShortcuts = (event, customUndo, customRedo) => handleUndoKeyboardShortcuts(event, false, customUndo, customRedo); 793var enableUndoKeyboardShortcuts = (event) => handleUndoKeyboardShortcuts(event, false); 794var disableUndoKeyboardShortcuts = (event) => handleUndoKeyboardShortcuts(event, true); 795function isTextInputTargeted(event) { 796 return [ 797 "INPUT", 798 "TEXTAREA", 799 "SELECT", 800 "OPTION" 801 ].includes(event.target?.["tagName"]) || event.target?.["contentEditable"] === "true" || event.target?.["classList"]?.contains("ql-editor"); 802} 803//#endregion 804//#region client/components/common/keyboardShortcuts/useKeyPressed.ts 805function useKeyPressed(validate) { 806 const [isPressed, setIsPressed] = (0, import_react.useState)(false); 807 (0, import_react.useEffect)(() => { 808 function handleKeyDown(e) { 809 if (validate(e)) setIsPressed(true); 810 } 811 function handleKeyUp(e) { 812 if (validate(e)) setIsPressed(false); 813 } 814 function reset() { 815 setIsPressed(false); 816 } 817 document.addEventListener("keydown", handleKeyDown, { capture: true }); 818 document.addEventListener("keyup", handleKeyUp, { capture: true }); 819 window.addEventListener("blur", reset); 820 document.addEventListener("visibilitychange", reset); 821 return () => { 822 document.removeEventListener("keydown", handleKeyDown, { capture: true }); 823 document.removeEventListener("keyup", handleKeyUp, { capture: true }); 824 window.removeEventListener("blur", reset); 825 document.removeEventListener("visibilitychange", reset); 826 }; 827 }, [validate]); 828 return isPressed; 829} 830var ctrl = (e) => e.key === "Control"; 831var cmd = (e) => e.key === "Meta"; 832var MULTI_SELECT_MODIFIER_KEY = isMac() ? cmd : ctrl; 833var shift = (e) => e.key === "Shift"; 834//#endregion 835//#region client/components/common/DebouncedSearch.tsx 836var DebouncedSearch = (props) => { 837 const { initialValue, onChangeCallback, searchValueSetterRef, ...searchProps } = props; 838 const [currentValue, setCurrentValue] = (0, import_react.useState)(props.initialValue ?? ""); 839 const debouncedOnChange = (0, import_react.useCallback)((0, import_lodash.debounce)(onChangeCallback, 300), []); 840 if (searchValueSetterRef) searchValueSetterRef.current = setCurrentValue; 841 const onSearchChange = (event) => { 842 const newValue = event.target.value; 843 setCurrentValue(newValue); 844 debouncedOnChange(newValue); 845 }; 846 const onClearClick = () => { 847 setCurrentValue(""); 848 onChangeCallback(""); 849 }; 850 return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dist$3.Search, { 851 value: currentValue, 852 onChange: onSearchChange, 853 onClear: onClearClick, 854 ...searchProps 855 }); 856}; 857//#endregion 858//#region node_modules/@fortawesome/pro-regular-svg-icons/faFolderPlus.js 859var require_faFolderPlus = /* @__PURE__ */ __commonJSMin(((exports) => { 860 Object.defineProperty(exports, "__esModule", { value: true }); 861 var prefix = "far"; 862 var iconName = "folder-plus"; 863 var width = 512; 864 var height = 512; 865 var aliases = []; 866 var unicode = "f65e"; 867 var svgPathData = "M464 384c0 8.8-7.2 16-16 16L64 400c-8.8 0-16-7.2-16-16L48 96c0-8.8 7.2-16 16-16l138.7 0c3.5 0 6.8 1.1 9.6 3.2L250.7 112c13.8 10.4 30.7 16 48 16L448 128c8.8 0 16 7.2 16 16l0 240zM64 448l384 0c35.3 0 64-28.7 64-64l0-240c0-35.3-28.7-64-64-64L298.7 80c-6.9 0-13.7-2.2-19.2-6.4L241.1 44.8C230 36.5 216.5 32 202.7 32L64 32C28.7 32 0 60.7 0 96L0 384c0 35.3 28.7 64 64 64zM256 160c-13.3 0-24 10.7-24 24l0 48-48 0c-13.3 0-24 10.7-24 24s10.7 24 24 24l48 0 0 48c0 13.3 10.7 24 24 24s24-10.7 24-24l0-48 48 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-48 0 0-48c0-13.3-10.7-24-24-24z"; 868 exports.definition = { 869 prefix, 870 iconName, 871 icon: [ 872 width, 873 height, 874 aliases, 875 unicode, 876 svgPathData 877 ] 878 };
879 exports.faFolderPlus = exports.definition; 880 exports.prefix = prefix; 881 exports.iconName = iconName; 882 exports.width = width; 883 exports.height = height; 884 exports.ligatures = aliases; 885 exports.unicode = unicode; 886 exports.svgPathData = svgPathData; 887 exports.aliases = aliases; 888})); 889//#endregion 890//#region client/components/common/foldersManagement/NewFolderDialog.tsx 891var import_faFolderPlus = require_faFolderPlus(); 892var NewFolderDialog = (props) => { 893 const [newFolderName, setNewFolderName] = (0, import_react.useState)(""); 894 const [folderNameError, setFolderNameError] = (0, import_react.useState)(""); 895 const onClose = () => { 896 setNewFolderName(""); 897 setFolderNameError(""); 898 props.onClose(); 899 }; 900 const onConfirm = () => { 901 onClose(); 902 props.onConfirm(newFolderName); 903 }; 904 const onKeyDown = (event) => { 905 if (event.key == "Enter" && !folderNameError && newFolderName.trim()) { 906 event.preventDefault(); 907 onConfirm(); 908 } 909 }; 910 const onFolderNameChange = (event) => { 911 const value = event.target.value; 912 setNewFolderName(value); 913 setFolderNameError(props.getFolderNameErrorMessage(value)); 914 }; 915 return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dist$3.SimpleInputDialog, { 916 open: props.open, 917 primaryActionButtonText: "Create", 918 secondaryActionButtonText: "Cancel", 919 PrimaryActionButtonProps: { 920 onClick: onConfirm, 921 "data-tracking-id": `${props.trackingIdPrefix}-new-folder-create`, 922 disabled: !newFolderName.trim() || !!folderNameError 923 }, 924 SecondaryActionButtonProps: { 925 onClick: onClose, 926 "data-tracking-id": `${props.trackingIdPrefix}-new-folder-cancel` 927 }, 928 CloseIconButtonProps: { onClick: onClose }, 929 dialogTitle: "Create new folder", 930 children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.TextField, { 931 label: "Folder name", 932 variant: "outlined",
933 margin: "normal", 934 value: newFolderName, 935 onChange: onFolderNameChange, 936 onKeyDown, 937 error: !!folderNameError, 938 helperText: folderNameError, 939 autoFocus: true, 940 fullWidth: true 941 }) 942 }); 943}; 944//#endregion 945//#region client/components/common/foldersManagement/ConfirmMoveAlreadyExistDialog.tsx 946var ConfirmAlreadyExistDialog = (props) => { 947 const typeName = props.itemDetails.typeDetails.capitalizedTypeName.toLowerCase(); 948 const article = props.itemDetails.typeDetails.article.toLowerCase(); 949 const onConfirm = () => { 950 props.onConfirm(); 951 props.onClose(); 952 }; 953 return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dist$3.ConfirmationDialog, { 954 open: props.open, 955 dialogTitle: `Move ${typeName}?`, 956 primaryActionButtonText: "Move", 957 PrimaryActionButtonProps: { 958 "data-tracking-id": `${props.trackingIdPrefix}-similar-keep`, 959 onClick: onConfirm 960 }, 961 secondaryActionButtonText: "Cancel", 962 SecondaryActionButtonProps: { 963 "data-tracking-id": `${props.trackingIdPrefix}-similar-cancel`, 964 onClick: props.onClose 965 }, 966 children: `The destination already contains ${article} ${typeName} named ${props.itemDetails.name}. A number will be added to the name of this ${typeName}.` 967 }); 968}; 969//#endregion 970//#region client/components/common/foldersManagement/utils.ts 971var isItemAlreadyExist = (itemToMoveName, targetFolderId, itemsByParentFolderId) => { 972 return (itemsByParentFolderId.get(targetFolderId) ?? []).some((item) => item.name.toLowerCase() === itemToMoveName.toLowerCase()); 973}; 974//#endregion 975//#region client/images/svg/truffle/empty-folder.svg 976var empty_folder_default = "data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='46'%20height='35'%20viewBox='0%200%2046%2035'%20fill='none'%3e%3cpath%20d='M37.625%206.25C39.4531%206.25%2041%207.79688%2041%209.625V10.75H5V5.125C5%203.29688%206.47656%201.75%208.375%201.75H19.625L24.125%206.25H37.625ZM5%2029.875V13H41V29.875C41%2031.7734%2039.4531%2033.25%2037.625%2033.25H8.375C6.47656%2033.25%205%2031.7734%205%2029.875Z'%20fill='%230053E5'%20fill-opacity='0.2'/%3e%3c/svg%3e"; 977//#endregion 978//#region client/images/svg/truffle/non-empty-folder.svg 979var non_empty_folder_default = "data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='46'%20height='35'%20viewBox='0%200%2046%2035'%20fill='none'%3e%3cpath%20d='M37.125%205.75C38.9531%205.75%2040.5%207.29688%2040.5%209.125V10.25H4.5V4.625C4.5%202.79688%205.97656%201.25%207.875%201.25H19.125L23.625%205.75H37.125ZM4.5%2029.375V12.5H40.5V29.375C40.5%2031.2734%2038.9531%2032.75%2037.125%2032.75H7.875C5.97656%2032.75%204.5%2031.2734%204.5%2029.375Z'%20fill='%238BA2FF'/%3e%3c/svg%3e"; 980//#endregion 981//#region client/images/svg/editor-media-no-search-results.svg 982var editor_media_no_search_results_default = "data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20viewBox='0%200%20200%20238.96'%3e%3cdefs%3e%3cstyle%3e.cls-1,.cls-14{fill:none;}.cls-18,.cls-2{fill:%230053e5;}.cls-14,.cls-2,.cls-3,.cls-4,.cls-7{stroke:%2303194f;stroke-miterlimit:10;}.cls-2,.cls-3{stroke-width:0.47px;}.cls-16,.cls-3,.cls-5{fill:%2303194f;}.cls-15,.cls-4,.cls-8{fill:%23f8f6f1;}.cls-14,.cls-4,.cls-7{stroke-width:0.51px;}.cls-6{fill:url(%23linear-gradient);}.cls-11,.cls-7{fill:%23e689f1;}.cls-9{fill:url(%23linear-gradient-2);}.cls-10{fill:url(%23linear-gradient-3);}.cls-12{clip-path:url(%23clip-path);}.cls-13{fill:url(%23linear-gradient-4);}.cls-15,.cls-16,.cls-18{fill-rule:evenodd;}.cls-17{fill:url(%23linear-gradient-5);}.cls-19{fill:%23fc545d;}%3c/style%3e%3clinearGradient%20id='linear-gradient'%20x1='79.93'%20y1='177.08'%20x2='111.06'%20y2='177.08'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20offset='0'%20stop-color='%23e689f1'/%3e%3cstop%20offset='0.19'%20stop-color='%23d17def'/%3e%3cstop%20offset='0.35'%20stop-color='%23ba72ed'/%3e%3cstop%20offset='0.5'%20stop-color='%239f69eb'/%3e%3cstop%20offset='0.66'%20stop-color='%238160e9'/%3e%3cstop%20offset='0.81'%20stop-color='%235a59e7'/%3e%3cstop%20offset='1'%20stop-color='%230053e5'/%3e%3c/linearGradient%3e%3clinearGradient%20id='linear-gradient-2'%20x1='82.19'%20y1='136.09'%20x2='86.37'%20y2='140.27'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20offset='0'%20stop-color='%2303194f'/%3e%3cstop%20offset='0.18'%20stop-color='%23032266'/%3e%3cstop%20offset='0.35'%20stop-color='%23022b7e'/%3e%3cstop%20offset='0.5'%20stop-color='%23013597'/%3e%3cstop%20offset='0.66'%20stop-color='%23013fb0'/%3e%3cstop%20offset='0.81'%20stop-color='%230049ca'/%3e%3cstop%20offset='1'%20stop-color='%230053e5'/%3e%3c/linearGradient%3e%3clinearGradient%20id='linear-gradient-3'%20x1='93.28'%20y1='171.67'%20x2='101.05'%20y2='179.44'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20offset='0'%20stop-color='%23e689f1'/%3e%3cstop%20offset='0.17'%20stop-color='%23d17def'/%3e%3cstop%20offset='0.31'%20stop-color='%23ba72ed'/%3e%3cstop%20offset='0.45'%20stop-color='%239f69eb'/%3e%3cstop%20offset='0.6'%20stop-color='%238160e9'/%3e%3cstop%20offset='0.73'%20stop-color='%235a59e7'/%3e%3cstop%20offset='0.94'%20stop-color='%230053e5'/%3e%3c/linearGradient%3e%3cclipPath%20id='clip-path'%20transform='translate(0%2026.51)'%3e%3ccircle%20id='SVGID'%20class='cls-1'%20cx='66.99'%20cy='27.25'%20r='26.99'/%3e%3c/clipPath%3e%3clinearGradient%20id='linear-gradient-4'%20x1='28.68'%20y1='26.99'%20x2='82.66'%20y2='26.99'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20offset='0'%20stop-color='%23fc545d'/%3e%3cstop%20offset='0.18'%20stop-color='%23f57'/%3e%3cstop%20offset='0.34'%20stop-color='%23ff5a91'/%3e%3cstop%20offset='0.5'%20stop-color='%23ff63ab'/%3e%3cstop%20offset='0.64'%20stop-color='%23fe6ec4'/%3e%3cstop%20offset='0.81'%20stop-color='%23f47bdc'/%3e%3cstop%20offset='1'%20stop-color='%23e689f1'/%3e%3c/linearGradient%3e%3clinearGradient%20id='linear-gradient-5'%20x1='142.5'%20y1='126.15'%20x2='200'%20y2='126.15'%20gradientTransform='translate(226.35%20-79.28)%20rotate(68.64)'%20xlink:href='%23linear-gradient-4'/%3e%3c/defs%3e%3cg%20id='Layer_2'%20%3e%3cg%20id='Layer_1-2'%20%3e%3ccircle%20class='cls-2'%20cx='95.41'%20cy='159.14'%20r='79.58'/%3e%3crect%20class='cls-3'%20x='58.02'%20y='121.26'%20width='75.77'%20height='75.77'/%3e%3cpath%20class='cls-4'%20d='M105.51,159.39H81.11v30.14a6.14,6.14,0,0,0,6.14,6.14h0a6.14,6.14,0,0,0,6.15-6.14V176.15a2.1,2.1,0,0,1,2.1-2.1h0a2.1,2.1,0,0,1,2.11,2.1v13.38a6.14,6.14,0,0,0,6.14,6.14h0a6.15,6.15,0,0,0,6.15-6.14V159.39Z'%20transform='translate(0%2026.51)'/%3e%3ccircle%20class='cls-5'%20cx='87.25'%20cy='216'%20r='6.14'/%3e%3ccircle%20class='cls-5'%20cx='103.74'%20cy='216.04'%20r='6.1'/%3e%3crect%20class='cls-6'%2
9820x='79.93'%20y='162.55'%20width='31.13'%20height='29.05'/%3e%3cpath%20class='cls-4'%20d='M112.19,131.75h3.28a6.63,6.63,0,0,1,6.63,6.63v22h-9.91Z'%20transform='translate(0%2026.51)'/%3e%3cpath%20class='cls-4'%20d='M79.32,139.44a5.26,5.26,0,0,1-4.77-3.05L62.78,111.07a5.25,5.25,0,1,1,9.53-4.43L84.08,132a5.26,5.26,0,0,1-4.76,7.48Z'%20transform='translate(0%2026.51)'/%3e%3cpath%20class='cls-4'%20d='M81.23,155.71h28.54a2.89,2.89,0,0,1,2.89,2.89v29a0,0,0,0,1,0,0H78.34a0,0,0,0,1,0,0v-29A2.89,2.89,0,0,1,81.23,155.71Z'/%3e%3ccircle%20class='cls-5'%20cx='117.7'%20cy='187.05'%20r='4.71'/%3e%3ccircle%20class='cls-5'%20cx='67.49'%20cy='135.24'%20r='5.5'/%3e%3cpath%20class='cls-7'%20d='M110.66,122.25v-7.19H80.34v7.19a18.45,18.45,0,0,1-.85,5.57h0a23.73,23.73,0,0,0,32,0h0A18.76,18.76,0,0,1,110.66,122.25Z'%20transform='translate(0%2026.51)'/%3e%3crect%20class='cls-4'%20x='71.54'%20y='128.26'%20width='47.91'%20height='9.94'%20rx='1.68'/%3e%3ccircle%20class='cls-4'%20cx='95.5'%20cy='134.37'%20r='21.46'/%3e%3cpath%20class='cls-5'%20d='M113.79,115.11c1.16-6.43.8-10.72.19-13.35A52.6,52.6,0,0,0,95.5,98.6,52.6,52.6,0,0,0,77,101.76c-.61,2.63-1,6.92.19,13.35,3.51,5.59,10.38,9.4,18.29,9.4S110.28,120.7,113.79,115.11Z'%20transform='translate(0%2026.51)'/%3e%3ccircle%20class='cls-8'%20cx='86.04'%20cy='134.19'%20r='4.11'/%3e%3ccircle%20class='cls-9'%20cx='84.28'%20cy='138.18'%20r='2.96'/%3e%3cpolygon%20class='cls-10'%20points='97.17%20167.78%2091.48%20177.63%20102.85%20177.63%2097.17%20167.78'/%3e%3cpolygon%20class='cls-5'%20points='95.5%20164.9%2088.15%20177.63%2091.48%20177.63%2097.17%20167.78%2095.5%20164.9'/%3e%3cline%20class='cls-4'%20x1='66.99'%20y1='99.63'%20x2='66.99'%20y2='133.88'/%3e%3ccircle%20class='cls-11'%20cx='66.99'%20cy='53.75'%20r='26.99'/%3e%3cpath%20class='cls-5'%20d='M78.33,59.16A2.34,2.34,0,0,0,76,56.84a2.33,2.33,0,1,0,0-4.65H58a2.33,2.33,0,1,0,0,4.65,2.33,2.33,0,1,0,0,4.65,2.32,2.32,0,1,0,0,4.64H76a2.32,2.32,0,1,0,0-4.64A2.34,2.34,0,0,0,78.33,59.16Z'%20transform='translate(0%2026.51)'/%3e%3cpath%20class='cls-5'%20d='M67,74.82a7.15,7.15,0,0,1-7.15-7.14h3.89a3.26,3.26,0,1,0,6.51,0h3.89A7.14,7.14,0,0,1,67,74.82Z'%20transform='translate(0%2026.51)'/%3e%3cg%20class='cls-12'%3e%3ccircle%20class='cls-13'%20cx='55.67'%20cy='26.99'%20r='26.99'/%3e%3c/g%3e%3cpath%20class='cls-8'%20d='M79.47,27.25,59.25,15.56V38.93Z'%20transform='translate(0%2026.51)'/%3e%3ccircle%20class='cls-14'%20cx='66.99'%20cy='53.75'%20r='26.99'/%3e%3cpath%20class='cls-8'%20d='M154.16,149.93l2.21,3.83h-4.43Z'%20transform='translate(0%2026.51)'/%3e%3cpath%20class='cls-11'%20d='M154.69,121.32a1.92,1.92,0,0,1-1.91-1.92h1a.88.88,0,1,0,1.75,0h1A1.92,1.92,0,0,1,154.69,121.32Z'%20transform='translate(0%2026.51)'/%3e%3cpath%20class='cls-15'%20d='M126.2,179.77h4.48v4.48H126.2Z'%20transform='translate(0%2026.51)'/%3e%3cpath%20class='cls-16'%20d='M144.57,143h4.48v4.48h-4.48Z'%20transform='translate(0%2026.51)'/%3e%3cpath%20class='cls-11'%20d='M156,164.76a2.23,2.23,0,0,0,2.24-2.23H157a1,1,0,1,1-2,0h-1.22A2.23,2.23,0,0,0,156,164.76Z'%20transform='translate(0%2026.51)'/%3e%3cpath%20class='cls-11'%20d='M64.15,189l2.59,4.47H61.57Z'%20transform='translate(0%2026.51)'/%3e%3cpath%20class='cls-8'%20d='M135.39,189.82l.86-.86,1.37,1.37L139,189l.86.86-1.37,1.37,1.37,1.37-.86.86-1.37-1.37-1.37,1.37-.86-.86,1.37-1.37Z'%20transform='translate(0%2026.51)'/%3e%3cpath%20class='cls-11'%20d='M146.79,170.59l2.59,4.47h-5.17Z'%20transform='translate(0%2026.51)'/%3e%3cpath%20class='cls-5'%20d='M73.34,179.78l2.59,4.47H70.76Z'%20transform='translate(0%2026.51)'/%3e%3cpath%20class='cls-16'%20d='M103.13,69.59H98.65v4.48h4.48Z'%20transform='translate(0%2026.51)'/%3e%3cpath%20class='cls-11'%20d='M147.53,124.66l.82.82-1.45,1.45,1.45,1.46-.82.81-2.27-2.27Z'%20transform='translate(0%2026.51)'/%3e%3cpath%20class='cls-15'%20d='M149,99.34a2.24,2.24,0,1,1-2.23-2.24A2.23,2.23,0,0,1,149,99.34Z'%20transform='translate(0%2026.51)'/%3e%3cpath%20class='cls-11'%20d='M120,60.38l.82.82-1.46,1.46,1.46,1.45-.82.82-2.28-2.27Z'%20transform='translate(0%2026.51)'/%3e%3cpath%20class='cls-8'%20d='M91.73,63.77a2.23,2.23,0,0,1-2.23-2.23h1.21a1,1,0,1,0,2,0H94A2.23,2.23,0,0,1,91.73,63.77Z'%20transform='translate(0%2026.51)'/%3e%3cpath%20class='cls-8'%20d='M137.6,78.77,135,83.25h5.17Z'%20transform='translate(0%2026.51)'/%3e%3cpath%20class='cls-11'%2
9820d='M120,78.74l.82.82L119.37,81l1.45,1.46-.82.81L117.73,81Z'%20transform='translate(0%2026.51)'/%3e%3cpath%20class='cls-11'%20d='M73.35,78.77l-2.58,4.48h5.17Z'%20transform='translate(0%2026.51)'/%3e%3cpath%20class='cls-15'%20d='M25.21,133.86h4.48v4.48H25.21Z'%20transform='translate(0%2026.51)'/%3e%3cpath%20class='cls-16'%20d='M43.57,163.65a2.24,2.24,0,1,0,2.24-2.24A2.23,2.23,0,0,0,43.57,163.65Z'%20transform='translate(0%2026.51)'/%3e%3cpath%20class='cls-11'%20d='M43.58,143.91l.86-.86,1.37,1.38,1.37-1.38.86.86-1.37,1.37L48,146.66l-.86.85-1.37-1.37-1.37,1.37-.86-.85L45,145.28Z'%20transform='translate(0%2026.51)'/%3e%3cpath%20class='cls-11'%20d='M28.15,156.74l.82-.82-1.46-1.45L29,153l-.82-.82-2.27,2.27Z'%20transform='translate(0%2026.51)'/%3e%3cpath%20class='cls-8'%20d='M45.79,124.69l-2.58,4.48h5.17Z'%20transform='translate(0%2026.51)'/%3e%3cpath%20class='cls-11'%20d='M36.63,109.67a2.23,2.23,0,0,1-2.23-2.23h1.21a1,1,0,0,0,2,0h1.21A2.23,2.23,0,0,1,36.63,109.67Z'%20transform='translate(0%2026.51)'/%3e%3cpath%20class='cls-5'%20d='M190.26,133.67c-2.29,5.85-12.67,7.26-23.18,3.15s-17.18-12.19-14.89-18,7.89,5,18.4,9.07S192.55,127.82,190.26,133.67Z'%20transform='translate(0%2026.51)'/%3e%3cellipse%20class='cls-17'%20cx='171.25'%20cy='126.15'%20rx='5.85'%20ry='30.78'%20transform='translate(-8.62%20266.19)%20rotate(-68.64)'/%3e%3cpath%20class='cls-4'%20d='M160.34,118.37c-.5,1.27,4.52,4.42,11.2,7s12.51,3.71,13,2.44c0,0,0,0,0,0a13.2,13.2,0,0,0-24.21-9.46S160.34,118.35,160.34,118.37Z'%20transform='translate(0%2026.51)'/%3e%3cpath%20class='cls-18'%20d='M31,195.62a5.06,5.06,0,1,1-5.06-5.05A5.07,5.07,0,0,1,31,195.62Z'%20transform='translate(0%2026.51)'/%3e%3cpath%20class='cls-11'%20d='M7.32,125.05,10,127.68l-4.68,4.68L10,137.05l-2.63,2.63L0,132.36Z'%20transform='translate(0%2026.51)'/%3e%3cpath%20class='cls-19'%20d='M163.15,57.19l-2.29-2.28-3.65,3.65-3.66-3.65-2.28,2.28,3.65,3.66-3.65,3.65,2.28,2.28,3.66-3.65,3.65,3.65,2.29-2.28-3.66-3.65Z'%20transform='translate(0%2026.51)'/%3e%3c/g%3e%3c/g%3e%3c/svg%3e"; 983//#endregion 984//#region client/components/common/foldersManagement/MoveToFolderDialog.tsx 985var MoveToFolderDialogActions = /* @__PURE__ */ function(MoveToFolderDialogActions) { 986 MoveToFolderDialogActions["MOVE"] = "Move"; 987 MoveToFolderDialogActions["ADD"] = "Add"; 988 return MoveToFolderDialogActions; 989}({}); 990var MoveToFolderDialog = (props) => { 991 const [currentFolderId, setCurrentFolderId] = (0, import_react.useState)(props.initialFolderId); 992 const [searchedValue, setSearchedValue] = (0, import_react.useState)(""); 993 const [isNewFolderDialogOpen, setIsNewFolderDialogOpen] = (0, import_react.useState)(false); 994 const [isConfirmAlreadyExistDialogOpen, setIsConfirmAlreadyExistDialogOpen] = (0, import_react.useState)(false); 995 (0, import_react.useEffect)(() => { 996 setCurrentFolderId(props.initialFolderId); 997 }, [props.initialFolderId]); 998 const multiMode = props.forceMultiMode || props.itemsToMoveDetails.length > 1; 999 const currentFolderPathFromRoot = getPathFromRoot(currentFolderId, props.foldersById, props.rootFolderName); 1000 const currentFolder = props.foldersById.get(currentFolderId); 1001 const isRootFolder = !currentFolder?.parentFolder; 1002 const subFolders = props.foldersByParentFolderId.get(currentFolderId) ?? []; 1003 const isSubFolderInItemsToMove = (subFolder) => props.itemsToMoveDetails.some((item) => item.isFolder && subFolder.id == item.id); 1004 const filteredSubFolders = subFolders.filter((subFolder) => subFolder.name.toLowerCase().includes(searchedValue.toLowerCase()) && !isSubFolderInItemsToMove(subFolder)).sort((subFolder1, subFolder2) => subFolder1.name.localeCompare(subFolder2.name, "en", { sensitivity: "base" })); 1005 const noValidFolders = subFolders.length > 0 && subFolders.every((subFolder) => isSubFolderInItemsToMove(subFolder)); 1006 const alreadyInCurrentFolder = props.itemsToMoveDetails.every((item) => item.parentFolderId === currentFolderId); 1007 const alreadyInCurrentRoot = isRootFolder && props.itemsToMoveDetails.every((item) => item.parentFolderId === null); 1008 const isMoveDisabled = alreadyInCurrentFolder || alreadyInCurrentRoot; 1009 const trackingIdPrefix = `tracking-id-${props.trackingIdentifier}-${props.action.toLowerCase()}`; 1010 const navigateIntoFolder = (targetFolderId) => { 1011 setCurrentFolderId(targetFolderId); 1012 }; 1013 const onClose = () => { 1014 props.onClose(); 1015 setSearchedValue(""); 1016 setCurrentFolderId(props.initialFolderId); 1017 }; 1018 const onConfirm = () => { 1019 onClose(); 1020 props.onMoveConfirm(currentFolderId); 1021 }; 1022 const onMoveClick = () => { 1023 if (!props.skipSameNameAssetWarning && !multiMode && isItemAlreadyExist(props.itemsToMoveDetails[0].name, currentFolderId, props.itemsByParentFolderId)) setIsConfirmAlreadyExistDialogOpen(true); 1024 else onConfirm(); 1025 }; 1026 const onCreateNewFolder = async (newFolderName) => { 1027 const newFolderId = await props.onCreateNewFolder(newFolderName, currentFolderId, currentFolder.name); 1028 navigateIntoFolder(newFolderId ?? currentFolderId); 1029 }; 1030 const getFoldersSection = () => { 1031 if (noValidFolders) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Box, { 1032 sx: { 1033 height: "100%", 1034 display: "flex", 1035 alignItems: "center", 1036 justifyContent: "center" 1037 }, 1038 children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Typography, { 1039 variant: "subtitle1", 1040 color: "text.secondary",
1041 children: "No valid folders" 1042 }) 1043 }); 1044 if (subFolders.length) if (filteredSubFolders.length) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Box, { 1045 sx: { 1046 flexGrow: 1, 1047 overflow: "auto", 1048 ...import_dist$3.scrollOnHoverSxProps 1049 }, 1050 children: filteredSubFolders.map((folder) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FolderItem, { 1051 folderDetails: folder, 1052 isEmpty: (props.foldersByParentFolderId.get(folder.id) ?? []).length == 0, 1053 selected: false, 1054 onNavigationClick: () => navigateIntoFolder(folder.id), 1055 trackingIdPrefix 1056 }, `folder-item-${folder.id}`)) 1057 }); 1058 else return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(NoSearchResults$1, { searchedValue }); 1059 else return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Box, { 1060 sx: { 1061 height: "100%", 1062 display: "flex", 1063 alignItems: "center", 1064 justifyContent: "center" 1065 }, 1066 children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Typography, { 1067 variant: "subtitle1", 1068 color: "text.secondary", 1069 children: "There are no folders here..." 1070 }) 1071 }); 1072 }; 1073 const multiModeItemDescription = `${props.itemsToMoveDetails.length} item${props.itemsToMoveDetails.length !== 1 ? "s" : ""}`; 1074 const dialogTitle = multiMode ? `${props.action} ${multiModeItemDescription}` : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_material.Box, { 1075 sx: { 1076 display: "flex", 1077 flexGrow: 1 1078 }, 1079 children: [ 1080 `${props.action} "`, 1081 /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dist$3.TypographyWithTooltipOnOverflow, { 1082 variant: "h3", 1083 children: props.itemsToMoveDetails[0].name 1084 }), 1085 "\"" 1086 ] 1087 }); 1088 const primaryActionText = multiMode ? `${props.action} ${multiModeItemDescription}` : props.action; 1089 return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [ 1090 /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_dist$3.SimpleInputDialog, { 1091 open: props.open, 1092 maxWidth: "sm", 1093 PaperProps: { sx: { 1094 height: "700px", 1095 width: "600px" 1096 } }, 1097 dialogTitle, 1098 DialogContentProps: { sx: { 1099 display: "flex", 1100 flexDirection: "column", 1101 gap: "16px" 1102 } }, 1103 primaryActionButtonText: primaryActionText, 1104 PrimaryActionButtonProps: { 1105 "data-tracking-id": `${trackingIdPrefix}-to-move-here`, 1106 disabled: isMoveDisabled, 1107 onClick: onMoveClick 1108 }, 1109 secondaryActionButtonText: "Cancel", 1110 SecondaryActionButtonProps: { 1111 "data-tracking-id": `${trackingIdPrefix}-to-cancel`, 1112 onClick: onClose 1113 }, 1114 children: [
1115 /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_material.Box, { 1116 sx: { 1117 display: "flex", 1118 gap: "4px", 1119 alignItems: "center" 1120 }, 1121 children: [ 1122 !isRootFolder ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Tooltip, { 1123 arrow: true, 1124 placement: "top", 1125 title: "Back", 1126 children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.IconButton, { 1127 sx: { fontSize: "16px" }, 1128 color: "secondary", 1129 onClick: () => navigateIntoFolder(currentFolder.parentFolder.id), 1130 "data-tracking-id": `${trackingIdPrefix}-to-folder-nav-button`, 1131 children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FontAwesomeIcon, { icon: import_faArrowLeft.faArrowLeft }) 1132 }) 1133 }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {}), 1134 /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dist$3.TypographyWithTooltipOnOverflow, { 1135 sx: { flexGrow: 1 }, 1136 variant: "subtitle1", 1137 color: "secondary", 1138 children: isRootFolder ? props.rootFolderName : currentFolder.name 1139 }), 1140 /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Button, { 1141 sx: { flexShrink: 0 }, 1142 variant: "outlined", 1143 size: "medium", 1144 color: "default", 1145 onClick: () => setIsNewFolderDialogOpen(true), 1146 "data-tracking-id": `${trackingIdPrefix}-to-new-folder`, 1147 startIcon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FontAwesomeIcon, { icon: import_faFolderPlus.faFolderPlus }), 1148 children: "New folder" 1149 }) 1150 ] 1151 }),
1152 /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DebouncedSearch, { 1153 initialValue: searchedValue, 1154 onChangeCallback: (newValue) => setSearchedValue(newValue), 1155 numberOfResults: filteredSubFolders.length 1156 }), 1157 getFoldersSection(), 1158 /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_material.Box, { 1159 "data-testid": "testid-breadcrumbs-section", 1160 sx: { 1161 padding: "8px 32px", 1162 display: "flex", 1163 gap: "5px", 1164 backgroundColor: "action.selected", 1165 color: "other.titles", 1166 marginTop: "-16px", 1167 marginLeft: "-32px", 1168 marginRight: "-32px" 1169 }, 1170 children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Typography, { 1171 variant: "body1", 1172 sx: { flexShrink: 0 }, 1173 children: `${props.action} to:` 1174 }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Breadcrumbs, { 1175 maxItems: 3, 1176 itemsBeforeCollapse: 0, 1177 itemsAfterCollapse: 2, 1178 children: currentFolderPathFromRoot.map((pathItem, index) => index < currentFolderPathFromRoot.length - 1 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Link, { 1179 underline: "hover", 1180 color: "inherit", 1181 onClick: () => navigateIntoFolder(pathItem.id), 1182 children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dist$3.TypographyWithTooltipOnOverflow, { 1183 sx: { maxWidth: "88px" }, 1184 children: pathItem.name 1185 }) 1186 }, `breadcrumb-link-${pathItem.id}`) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dist$3.TypographyWithTooltipOnOverflow, { 1187 sx: { maxWidth: "88px" }, 1188 color: "other.titles", 1189 children: pathItem.name 1190 }, `breadcrumb-typography-${pathItem.id}`)) 1191 })] 1192 }) 1193 ] 1194 }), 1195 /* @__PURE__ */ (0, import_jsx_runtime.jsx)(NewFolderDialog, { 1196 open: isNewFolderDialogOpen, 1197 onClose: () => setIsNewFolderDialogOpen(false), 1198 onConfirm: onCreateNewFolder, 1199 getFolderNameErrorMessage: (newValue) => props.getFolderNameErrorMessage(newValue, subFolders.map((subFolder) => subFolder.name.toLowerCase())), 1200 trackingIdPrefix: `${trackingIdPrefix}-to` 1201 }), 1202 props.itemsToMoveDetails && props.itemsToMoveDetails.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ConfirmAlreadyExistDialog, { 1203 open: isConfirmAlreadyExistDialogOpen, 1204 onClose: () => setIsConfirmAlreadyExistDialogOpen(false), 1205 onConfirm, 1206 targetFolder: props.foldersById.get(currentFolderId), 1207 itemDetails: props.itemsToMoveDetails[0],
1208 rootFolderName: props.rootFolderName, 1209 trackingIdPrefix 1210 }) 1211 ] }); 1212}; 1213var getPathFromRoot = (folderId, foldersById, rootFolderName) => { 1214 const path = []; 1215 let currentFolder = foldersById.get(folderId); 1216 while (currentFolder) { 1217 path.unshift({ 1218 id: currentFolder.id, 1219 name: currentFolder.parentFolder ? currentFolder.name : rootFolderName 1220 }); 1221 currentFolder = currentFolder.parentFolder ? foldersById.get(currentFolder.parentFolder.id) : null; 1222 } 1223 return path; 1224}; 1225var FolderItem = (props) => { 1226 return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_material.ListItemButton, { 1227 sx: { 1228 padding: "6px 8px", 1229 gap: "12px" 1230 }, 1231 divider: true, 1232 selected: props.selected, 1233 disableRipple: true, 1234 onClick: props.onNavigationClick, 1235 children: [ 1236 /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Box, { 1237 sx: folderIconContainerSxProps, 1238 children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Box, { 1239 component: "img", 1240 src: props.isEmpty ? empty_folder_default : non_empty_folder_default 1241 }) 1242 }), 1243 /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dist$3.TypographyWithTooltipOnOverflow, { 1244 sx: { flexGrow: 1 }, 1245 variant: "body2", 1246 children: props.folderDetails.name 1247 }), 1248 /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.IconButton, { 1249 color: "default", 1250 onClick: props.onNavigationClick, 1251 "data-tracking-id": `${props.trackingIdPrefix}-go-into-folder-${props.folderDetails.name}`, 1252 children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FontAwesomeIcon, { icon: import_faChevronRight.faChevronRight }) 1253 }) 1254 ] 1255 }); 1256}; 1257var folderIconContainerSxProps = { 1258 width: "120px", 1259 height: "68px", 1260 display: "flex", 1261 alignItems: "center", 1262 justifyContent: "center", 1263 flexShrink: 0, 1264 border: (theme) => `1px solid ${theme.palette.grey[300]}`, 1265 backgroundColor: (theme) => theme.palette.grey[50] 1266}; 1267var NoSearchResults$1 = (props) => { 1268 return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_material.Box, { 1269 sx: { 1270 display: "flex", 1271 flexDirection: "column", 1272 gap: "24px", 1273 alignItems: "center", 1274 padding: "24px 0", 1275 height: 0, 1276 flexGrow: 1 1277 }, 1278 children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_material.Box, { 1279 sx: { display: "flex" }, 1280 children: [
1281 /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Typography, { 1282 variant: "subtitle1", 1283 color: "text.secondary", 1284 children: "No results for \"" 1285 }), 1286 /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Typography, { 1287 sx: { 1288 maxWidth: "235px", 1289 whiteSpace: "nowrap", 1290 overflow: "hidden", 1291 textOverflow: "ellipsis" 1292 }, 1293 variant: "subtitle1", 1294 color: "text.secondary", 1295 children: props.searchedValue 1296 }), 1297 /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Typography, { 1298 sx: { display: "flex" }, 1299 variant: "subtitle1", 1300 color: "text.secondary", 1301 children: "\"" 1302 }) 1303 ] 1304 }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Box, { 1305 sx: { width: "200.5px" }, 1306 component: "img", 1307 src: editor_media_no_search_results_default 1308 })] 1309 }); 1310}; 1311//#endregion 1312//#region client/components/editor/Hooks/UseAssetLibrary/useAssetLibraryMedia.ts 1313var useAssetLibraryMedia = () => { 1314 return useReactiveVar(assetMediaVar); 1315}; 1316var useMediaLibraryReady = () => { 1317 const mediaLibrary = useAssetLibraryMedia(); 1318 return !!mediaLibrary && !mediaLibrary.loading && !!mediaLibrary.rootFolder; 1319}; 1320var useLibraryAsset = (id) => { 1321 const { assetLibraryMediaByGqlMediaId } = useAssetLibraryMedia(); 1322 return assetLibraryMediaByGqlMediaId[id]; 1323}; 1324var useLibraryOriginalAsset = (id) => { 1325 const { assetLibraryMediaByGqlMediaId } = useAssetLibraryMedia(); 1326 const media = assetLibraryMediaByGqlMediaId[id]; 1327 return media?.originalMediaId ? assetLibraryMediaByGqlMediaId[media.originalMediaId] : media; 1328}; 1329var useLibraryDirectAncestorMedia = (id) => { 1330 const { assetLibraryMediaByGqlMediaId } = useAssetLibraryMedia(); 1331 const media = assetLibraryMediaByGqlMediaId[id]; 1332 return media?.directAncestorId ? assetLibraryMediaByGqlMediaId[media.directAncestorId] : media; 1333}; 1334//#endregion 1335//#region client/components/editor/Nooks/ExternalLibraries/externalLibraries.ts 1336var setEditorExternalLibraries = async (externalLibraries) => { 1337 try { 1338 await getApolloClient().mutate({ 1339 mutation: UpsertUserSettingsDocument, 1340 variables: { upsertUserSettingsInput: externalLibraries } 1341 }); 1342 } catch (err) { 1343 const gqlError = err.graphQLErrors?.[0]; 1344 const sskyErrorCode = getSskyErrorCodeFromGqlError(gqlError); 1345 throw new EnhancedError(gqlError || err, sskyErrorCode); 1346 } 1347}; 1348//#endregion 1349//#region client/components/editor/Hooks/UseEditorUsageAcceptance/useEditorUsageAcceptance.ts 1350var useEditorUsageAcceptance = (libraryId) => { 1351 const { loading, data } = useUserSettingsQuery({ variables: { id: localEditorUserNameVar() || getUserData().userName } }); 1352 const accountId = useActiveAccountId(); 1353 const externalLibrariesSettings = data?.userSettings?.externalLibraries || []; 1354 const hasUserAcceptedTerms = !!externalLibrariesSettings[libraryId]?.acceptedUsage; 1355 const hasUserDismissedLibraryChangeMessage = externalLibrariesSettings[libraryId]?.dismissedChangeMessageInAccounts?.includes(accountId); 1356 const getUpdatedExternalLibraries = (acceptedUsage) => { 1357 return { externalLibraries: { 1358 ...externalLibrariesSettings, 1359 [libraryId]: { 1360 ...externalLibrariesSettings[libraryId] || {}, 1361 acceptedUsage 1362 } 1363 } }; 1364 }; 1365 const getUpdatedLibraryAfterDismissChangeMessage = () => { 1366 let librarySettings = externalLibrariesSettings[libraryId] ? deepCloneObj(externalLibrariesSettings[libraryId]) : { acceptedUsage: false }; 1367 if (!librarySettings.dismissedChangeMessageInAccounts) librarySettings.dismissedChangeMessageInAccounts = []; 1368 librarySettings.dismissedChangeMessageInAccounts.push(accountId); 1369 return { externalLibraries: { 1370 ...externalLibrariesSettings, 1371 [libraryId]: librarySettings 1372 } }; 1373 }; 1374 const acceptUsage = async () => { 1375 setEditorExternalLibraries(getUpdatedExternalLibraries(true)); 1376 }; 1377 const declineUsage = async () => { 1378 setEditorExternalLibraries(getUpdatedExternalLibraries(false)); 1379 }; 1380 const dismissLibraryChangeMessage = async () => { 1381 setEditorExternalLibraries(getUpdatedLibraryAfterDismissChangeMessage()); 1382 }; 1383 return { 1384 isLoadingUserAcceptedTerms: loading, 1385 hasUserAcceptedTerms, 1386 acceptUsage, 1387 declineUsage, 1388 hasUserDismissedLibraryChangeMessage, 1389 dismissLibraryChangeMessage 1390 }; 1391}; 1392//#endregion 1393//#region client/components/editor/Hooks/UseMediaLibraryViewType/useMediaLibraryViewType.ts 1394var useMediaLibraryViewType = () => { 1395 const { data } = useUserSettingsQuery({ variables: { id: useUserData()?.userName } }); 1396 return { currentViewType: data?.userSettings?.mediaLibraryViewType || GqlClientLibraryViewType.GRID }; 1397}; 1398//#endregion 1399//#region client/components/editor/Nooks/AssetLibrary/assetLibraryMedia.ts 1400init_lib();
1401var goToFolder = (destinationFolderId, setActiveTab, setCurrentFolderId) => { 1402 closeNotification(); 1403 setActiveTab(MediaLibraryActiveTab.YourLibrary); 1404 setCurrentFolderId(destinationFolderId); 1405}; 1406var deleteTruffleAssetMedia = async (id) => { 1407 try { 1408 const result = await getApolloClient().mutate({ 1409 mutation: DeleteEditorLibraryAssetMediaDocument, 1410 variables: { input: { 1411 id, 1412 updated: IGNORE_UPDATED 1413 } } 1414 }); 1415 if (result?.errors) return false; 1416 return result?.data.deleteEditorAssetMedia.result !== GqlClientDeleteEditorAssetMediaResult.USED_IN_REFUSAL; 1417 } catch { 1418 return false; 1419 } 1420}; 1421var getFolderName = (folderId) => { 1422 const folder = getApolloClient().cache.readFragment({ 1423 id: `EditorAssetFolder:${folderId}`, 1424 fragment: gql` 1425 fragment FolderName on EditorAssetFolder { 1426 name 1427 parentFolder { 1428 id 1429 } 1430 } 1431 ` 1432 }); 1433 return folder ? folder.parentFolder ? folder.name : null : void 0; 1434}; 1435var updateEditorAssetMedia = async (assetId, name, description) => { 1436 const inputVars = { 1437 assetId, 1438 name, 1439 description 1440 }; 1441 return (await getApolloClient().mutate({ 1442 mutation: UpdateEditorAssetMediaDocument, 1443 variables: { input: inputVars } 1444 }))?.data?.updateEditorAssetMedia?.result; 1445}; 1446var renameEditorAssetFolder = async (folderId, folderName, parentFolderId) => { 1447 return (await getApolloClient().mutate({ 1448 mutation: RenameEditorAssetFolderDocument, 1449 variables: { input: { 1450 folderId, 1451 folderName, 1452 parentFolderId 1453 } } 1454 })).data.renameEditorAssetFolder; 1455}; 1456var deleteEditorAssetFolder = async (folderId) => { 1457 return (await getApolloClient().mutate({ 1458 mutation: DeleteEditorAssetFolderDocument, 1459 variables: { input: { folderId } } 1460 })).data.deleteEditorAssetFolder; 1461}; 1462var moveEditorAssetToFolder = async (assetId, assetName, destinationFolderId, setActiveTab, setCurrentFolderId, onMoveSuccess, showSuccessNotification = true) => { 1463 const destinationFolderName = getFolderName(destinationFolderId); 1464 if ((await getApolloClient().mutate({ 1465 mutation: MoveEditorAssetToFolderDocument, 1466 variables: { input: { 1467 assetId, 1468 destinationFolderId, 1469 assetName 1470 } } 1471 })).data.moveEditorAssetToFolder.result === GqlClientMoveEditorAssetToFolderResult.SUCCESS) { 1472 showSuccessNotification && setSuccessNotification({ 1473 message: `Media asset moved to ${destinationFolderName ? "folder" : "Your Media"}`, 1474 showCloseButton: true, 1475 actionButton: { 1476 label: `Go to ${destinationFolderName ? "Folder" : "Your Media"}`, 1477 onClick: () => goToFolder(destinationFolderId, setActiveTab, setCurrentFolderId) 1478 } 1479 }); 1480 onMoveSuccess?.(destinationFolderId); 1481 } 1482}; 1483var moveEditorFolderToFolder = async (folderId, folderName, destinationFolderId, setActiveTab, setCurrentFolderId, onMoveSuccess, showSuccessNotification = true) => { 1484 const destinationFolderName = getFolderName(destinationFolderId); 1485 if ((await getApolloClient().mutate({ 1486 mutation: MoveEditorFolderToFolderDocument, 1487 variables: { input: { 1488 folderId, 1489 destinationFolderId, 1490 folderName 1491 } } 1492 })).data.moveEditorFolderToFolder.result === GqlClientMoveEditorFolderToFolderResult.SUCCESS) { 1493 showSuccessNotification && setSuccessNotification({ 1494 message: `Folder moved to ${destinationFolderName ? "folder" : "Your Media"}`, 1495 showCloseButton: true, 1496 actionButton: { 1497 label: `Go to ${destinationFolderName ? "Folder" : "Your Media"}`, 1498 onClick: () => { 1499 closeNotification(); 1500 setActiveTab(MediaLibraryActiveTab.YourLibrary); 1501 setCurrentFolderId(destinationFolderId); 1502 } 1503 } 1504 }); 1505 onMoveSuccess?.(destinationFolderId); 1506 } 1507}; 1508async function moveMediaItemsToFolder(assets, folders, destinationFolderId, setActiveTab, setCurrentFolderId, onMoveSuccess, trackingOrigin) { 1509 const destinationFolderName = getFolderName(destinationFolderId); 1510 const count = assets.length + folders.length; 1511 const result = await getApolloClient().mutate({ 1512 mutation: MoveEditorAssetMediaAndFoldersToFolderDocument, 1513 variables: { input: { 1514 assets, 1515 folders, 1516 destinationFolderId 1517 } } 1518 }); 1519 PendoService.getInstance().trackEvent("Batch media asset action", { 1520 action: "move", 1521 itemCount: count.toString(), 1522 origin: trackingOrigin 1523 }); 1524 if (result.data?.moveEditorAssetMediaAndFolderToFolder.result === GqlClientMoveEditorAssetMediaAndFolderToFolderResult.SUCCESS) { 1525 setSuccessNotification({ 1526 message: `${count} item${count !== 1 ? "s" : ""} moved successfully`, 1527 showCloseButton: true, 1528 actionButton: { 1529 label: `Go to ${destinationFolderName ? "folder" : "Your Media"}`, 1530 onClick: () => { 1531 closeNotification(); 1532 setActiveTab(MediaLibraryActiveTab.YourLibrary); 1533 setCurrentFolderId(destinationFolderId); 1534 } 1535 } 1536 }); 1537 onMoveSuccess(); 1538 } else setErrorNotification({ message: "Item transfer failed. Try again." }); 1539} 1540function getAssetLibrary() { 1541 let mediaVar = assetMediaVar(); 1542 if (!mediaVar) { 1543 loadMediaData(); 1544 mediaVar = assetMediaVar(); 1545 } 1546 return { 1547 id: mediaVar.assetLibraryId, 1548 media: mediaVar.assetLibraryMedia, 1549 mediaFolders: mediaVar.mediaFolders 1550 }; 1551} 1552function getRootFolder() { 1553 const assetLibrary = getAssetLibrary(); 1554 if (assetLibrary) return (assetLibrary.mediaFolders ?? []).find((folder) => folder.parentFolder === null); 1555} 1556var createEditorAssetFolder = async (newFolderName, parentFolderId) => { 1557 const mutationResponse = await getApolloClient().mutate({ 1558 mutation: CreateEditorAssetFolderDocument, 1559 variables: { input: { 1560 name: newFolderName, 1561 parentId: parentFolderId 1562 } } 1563 }); 1564 if (mutationResponse.data.createEditorAssetFolder.__typename === "CreateEditorAssetFolderOutputSuccess") return mutationResponse.data.createEditorAssetFolder.folder.id; 1565 else return null; 1566}; 1567var generateAssetNonGettyPremiumFilter = () => { 1568 return (asset) => asset.mediaOrigin !== "external" || asset.externalLibrary !== "getty" || asset.externalSublibrary !== "premium"; 1569};
1570function handleLibraryMediaUpdate(assetLibrary) { 1571 const assetLibraryMedia = assetLibrary?.media ?? []; 1572 const assetLibraryId = assetLibrary?.id ?? ""; 1573 const mediaFolders = assetLibrary?.mediaFolders ?? []; 1574 const assetLibraryMediaByGqlMediaId = convertArrayOfObjectsToObject(assetLibraryMedia, "id"); 1575 const assetLibraryMediaByLocalMediaId = assetLibraryMedia.reduce((acc, asset) => { 1576 acc[getLocalIdFromGqlId(asset.id)] = asset; 1577 return acc; 1578 }, {}); 1579 const surrogateAssets = assetLibraryMedia.filter((asset) => asset.mediaOrigin === GqlClientMediaOrigin.SURROGATE); 1580 const surrogateAssetMediaByMediaId = convertArrayOfObjectsToObject(surrogateAssets, "id"); 1581 const surrogateAssetMediaByName = convertArrayOfObjectsToObject(surrogateAssets, "name"); 1582 const nonGettyPremiumFilter = generateAssetNonGettyPremiumFilter(); 1583 const initialAvailableAssetsForSaveAs = assetLibraryMedia.filter((asset) => asset.mediaOrigin === GqlClientMediaOrigin.USER || asset.mediaOrigin === GqlClientMediaOrigin.EXTERNAL || asset.mediaOrigin === GqlClientMediaOrigin.RECORDER || asset.mediaOrigin === GqlClientMediaOrigin.AI_GENERATED); 1584 const initialAvailableAssetsInYourLibrary = initialAvailableAssetsForSaveAs.filter((asset) => asset.lifecycleStage === GqlClientAssetLifecycleStage.ENABLED && asset.mediaClassification !== GqlClientMediaClassification.HIDDEN); 1585 const availableAssetsForSaveAs = initialAvailableAssetsForSaveAs.filter((asset) => nonGettyPremiumFilter(asset)); 1586 const availableAssetsInYourLibrary = initialAvailableAssetsInYourLibrary.filter((asset) => nonGettyPremiumFilter(asset)); 1587 const hiddenGettyPremiumExpiredMedia = initialAvailableAssetsInYourLibrary.filter((asset) => !nonGettyPremiumFilter(asset)); 1588 const availableAssetsForSaveAsById = convertArrayOfObjectsToObject(availableAssetsForSaveAs, "id"); 1589 const availableAssetsInYourLibraryById = convertArrayOfObjectsToObject(availableAssetsInYourLibrary, "id"); 1590 const rootFolder = mediaFolders.find((folder) => !folder.parentFolder); 1591 const foldersById = new Map(mediaFolders.map((folder) => [folder.id, folder])); 1592 const foldersByParentFolderId = /* @__PURE__ */ new Map(); 1593 for (const folder of mediaFolders) { 1594 if (!folder.parentFolder) continue; 1595 const folders = foldersByParentFolderId.get(folder.parentFolder.id) ?? []; 1596 folders.push(folder); 1597 foldersByParentFolderId.set(folder.parentFolder.id, folders); 1598 } 1599 const pathFromRootToFoldersById = /* @__PURE__ */ new Map(); 1600 for (const folder of mediaFolders) { 1601 const path = []; 1602 let curFolder = folder; 1603 while (curFolder) { 1604 path.unshift({ 1605 id: curFolder.id, 1606 name: curFolder.parentFolder ? curFolder.name : "Your Media" 1607 }); 1608 curFolder = curFolder.parentFolder ? foldersById.get(curFolder.parentFolder.id) : null; 1609 } 1610 pathFromRootToFoldersById.set(folder.id, path); 1611 } 1612 const mediaByFolderId = /* @__PURE__ */ new Map(); 1613 for (const asset of assetLibraryMedia) { 1614 if (!asset.folder) continue; 1615 const assets = mediaByFolderId.get(asset.folder.id) ?? []; 1616 assets.push(asset); 1617 mediaByFolderId.set(asset.folder.id, assets); 1618 } 1619 assetMediaVar({ 1620 loading: false, 1621 assetLibraryMedia, 1622 assetLibraryMediaByGqlMediaId, 1623 assetLibraryMediaByLocalMediaId, 1624 availableAssetsInYourLibraryById, 1625 availableAssetsForSaveAsById, 1626 surrogateAssetMediaByMediaId, 1627 surrogateAssetMediaByName, 1628 hiddenGettyPremiumExpiredMedia, 1629 assetLibraryId, 1630 mediaFolders, 1631 foldersById, 1632 pathFromRootToFoldersById, 1633 foldersByParentFolderId, 1634 rootFolder, 1635 mediaByFolderId 1636 }); 1637} 1638var loadMediaData = () => { 1639 const { watchQuery } = getApolloClient(); 1640 const subscription = watchQuery({ 1641 query: EditorAccountLevelDataMediaDocument, 1642 variables: {} 1643 }).subscribe(({ data }) => { 1644 handleLibraryMediaUpdate(data?.editorAccountLevelData?.assetLibraryVersion); 1645 }); 1646 return () => subscription.unsubscribe(); 1647}; 1648var getMediaFolder = (folderId = null) => { 1649 const { loading, rootFolder, foldersById, foldersByParentFolderId, mediaByFolderId, pathFromRootToFoldersById } = assetMediaVar(); 1650 if (loading) return { 1651 folderFound: true, 1652 name: void 0, 1653 parentFolder: null, 1654 folders: [], 1655 media: [], 1656 selectedFolderId: folderId ?? "", 1657 pathFromRoot: [], 1658 rootFolder: null, 1659 foldersById: /* @__PURE__ */ new Map(), 1660 foldersByParentFolderId: /* @__PURE__ */ new Map(), 1661 mediaByFolderId: /* @__PURE__ */ new Map() 1662 }; 1663 const selectedFolderId = folderId ?? rootFolder.id; 1664 const selectedFolder = foldersById.get(selectedFolderId); 1665 if (!selectedFolder) return { 1666 folderFound: false, 1667 name: void 0, 1668 parentFolder: null, 1669 folders: [], 1670 media: [], 1671 selectedFolderId, 1672 pathFromRoot: [], 1673 rootFolder, 1674 foldersById, 1675 foldersByParentFolderId, 1676 mediaByFolderId 1677 }; 1678 const pathFromRoot = pathFromRootToFoldersById.get(selectedFolderId); 1679 return { 1680 folderFound: true, 1681 name: selectedFolder.name, 1682 parentFolder: foldersById.get(selectedFolder.parentFolder?.id) ?? null, 1683 folders: foldersByParentFolderId.get(selectedFolderId) ?? [], 1684 media: mediaByFolderId.get(selectedFolderId) ?? [], 1685 selectedFolderId, 1686 pathFromRoot, 1687 rootFolder, 1688 foldersById, 1689 foldersByParentFolderId, 1690 mediaByFolderId 1691 }; 1692}; 1693//#endregion 1694//#region client/components/editor/Nooks/MediaLibrary/mediaLibrary.ts 1695function setMediaLibraryByAudienceCaseIndex(value) { 1696 localEditorMediaLibraryByAudienceCaseIndex(value); 1697} 1698function setMediaDragAndDropSnackbarState(value) { 1699 localEditorMediaDragAndDropSnackbarState(value); 1700} 1701var setMediaLibraryViewType = async (newViewType) => { 1702 try { 1703 await getApolloClient().mutate({ 1704 mutation: UpdateMediaLibraryViewTypeDocument, 1705 variables: { input: { mediaLibraryViewType: newViewType } } 1706 }); 1707 } catch (err) { 1708 const gqlError = err.graphQLErrors?.[0];
1709 const sskyErrorCode = getSskyErrorCodeFromGqlError(gqlError); 1710 throw new EnhancedError(gqlError || err, sskyErrorCode); 1711 } 1712}; 1713function getMediaLibraryGridColumns() { 1714 return localEditorMediaLibraryGridColumns(); 1715} 1716function setMediaLibraryGridColumns(value) { 1717 localEditorMediaLibraryGridColumns(value); 1718} 1719async function persistMediaLibraryGridColumns() { 1720 try { 1721 await getApolloClient().mutate({ 1722 mutation: UpdateMediaLibraryGridColumnsDocument, 1723 variables: { columns: getMediaLibraryGridColumns() } 1724 }); 1725 } catch (err) { 1726 const gqlError = err.graphQLErrors?.[0]; 1727 const sskyErrorCode = getSskyErrorCodeFromGqlError(gqlError); 1728 throw new EnhancedError(gqlError || err, sskyErrorCode); 1729 } 1730} 1731function setMediaLibraryDraggingFromFolderId(value) { 1732 localEditorMediaLibraryDraggingFromFolderId(value); 1733} 1734//#endregion 1735//#region client/components/editor/Components/TruffleEditingWorkSpace/Components/Libraries/Components/NoFilteredResults.tsx 1736var emptyStateImage = new URL("/client/images/empty-filtered-folder-background.C1kvrJ3I.svg", "" + import.meta.url).href; 1737var NoFilteredResults = (props) => { 1738 return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_material.Box, { 1739 className: props.className, 1740 sx: containerSxProps$9, 1741 children: [ 1742 /* @__PURE__ */ (0, import_jsx_runtime.jsx)("img", { 1743 src: emptyStateImage, 1744 width: "220", 1745 alt: "no-filtered-results", 1746 style: { marginTop: "24px" } 1747 }), 1748 /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Typography, { 1749 variant: "h3", 1750 color: "secondary.main", 1751 sx: { 1752 mt: "11px", 1753 textAlign: "center" 1754 }, 1755 children: "No results" 1756 }), 1757 /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Button, { 1758 variant: "text", 1759 size: "medium", 1760 sx: { mt: "11px" }, 1761 onClick: props.onClear, 1762 children: "Clear all filters" 1763 }) 1764 ] 1765 }); 1766}; 1767var containerSxProps$9 = { 1768 height: "100%", 1769 marginRight: "16px", 1770 display: "flex", 1771 flexDirection: "column", 1772 alignItems: "center" 1773}; 1774//#endregion 1775//#region client/components/editor/Components/TruffleEditingWorkSpace/Components/Libraries/Components/TruffleMediaLibrary/ActionBar/FolderNavigation.tsx 1776var FolderNavigation = (props) => { 1777 return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Container$4, { 1778 "data-testid": "truffle-media-library-folder-navigation", 1779 children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Tooltip, { 1780 title: "Back", 1781 children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.IconButton, { 1782 color: "default", 1783 "data-tracking-id": `${trackingIdPrefix$2}-folder-nav-back-btn`, 1784 onClick: props.onBackClick, 1785 disabled: props.disabled, 1786 children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FontAwesomeIcon, { icon: import_faArrowLeft.faArrowLeft }) 1787 }) 1788 }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FolderName, { 1789 variant: "subtitle1", 1790 color: "text.primary", 1791 children: props.folderName 1792 })] 1793 }); 1794}; 1795var trackingIdPrefix$2 = "tracking-id-media-lib"; 1796var Container$4 = (0, import_material.styled)(import_material.Box)({ 1797 display: "flex", 1798 flexDirection: "row", 1799 alignItems: "center", 1800 gap: "4px", 1801 marginInlineEnd: "16px" 1802}); 1803var FolderName = (0, import_material.styled)(import_material.Typography)({ 1804 flexGrow: 1, 1805 overflow: "hidden", 1806 textOverflow: "ellipsis", 1807 whiteSpace: "nowrap" 1808}); 1809//#endregion 1810//#region node_modules/@fortawesome/pro-regular-svg-icons/faArrowDownAZ.js 1811var require_faArrowDownAZ = /* @__PURE__ */ __commonJSMin(((exports) => { 1812 Object.defineProperty(exports, "__esModule", { value: true }); 1813 var prefix = "far"; 1814 var iconName = "arrow-down-a-z"; 1815 var width = 512; 1816 var height = 512; 1817 var aliases = ["sort-alpha-asc", "sort-alpha-down"]; 1818 var unicode = "f15d"; 1819 var svgPathData = "M233.5 385l-88 88c-9.4 9.4-24.6 9.4-33.9 0l-88-88c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47 0-342.1c0-13.3 10.7-24 24-24s24 10.7 24 24l0 342.1 47-47c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9zM406 45.3l80 160c5.9 11.9 1.1 26.3-10.7 32.2S449 238.6 443 226.7l-13.6-27.2c-1.6 .3-3.2 .5-4.9 .5l-85.2 0-13.4 26.7c-5.9 11.9-20.3 16.7-32.2 10.7s-16.7-20.3-10.7-32.2l80-160c4.1-8.1 12.4-13.3 21.5-13.3s17.4 5.1 21.5 13.3zm-21.5 64.4l-21.2 42.3 42.3 0-21.2-42.3zM288.5 312c0-13.3 10.7-24 24-24l144 0c9.7 0 18.5 5.8 22.2 14.8s1.7 19.3-5.2 26.2l-103 103 86.1 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-144 0c-9.7 0-18.5-5.8-22.2-14.8s-1.7-19.3 5.2-26.2l103-103-86.1 0c-13.3 0-24-10.7-24-24z"; 1820 exports.definition = { 1821 prefix, 1822 iconName, 1823 icon: [ 1824 width, 1825 height, 1826 aliases, 1827 unicode, 1828 svgPathData 1829 ] 1830 }; 1831 exports.faArrowDownAZ = exports.definition; 1832 exports.prefix = prefix; 1833 exports.iconName = iconName; 1834 exports.width = width; 1835 exports.height = height; 1836 exports.ligatures = aliases; 1837 exports.unicode = unicode;
1838 exports.svgPathData = svgPathData; 1839 exports.aliases = aliases; 1840})); 1841//#endregion 1842//#region node_modules/@fortawesome/pro-regular-svg-icons/faArrowUpAZ.js 1843var require_faArrowUpAZ = /* @__PURE__ */ __commonJSMin(((exports) => { 1844 Object.defineProperty(exports, "__esModule", { value: true }); 1845 var prefix = "far"; 1846 var iconName = "arrow-up-a-z"; 1847 var width = 512; 1848 var height = 512; 1849 var aliases = ["sort-alpha-up"]; 1850 var unicode = "f15e"; 1851 var svgPathData = "M406 45.3C401.9 37.1 393.6 32 384.5 32S367.1 37.1 363 45.3l-80 160c-5.9 11.9-1.1 26.3 10.7 32.2s26.3 1.1 32.2-10.7l13.4-26.7 85.2 0c1.7 0 3.3-.2 4.9-.5L443 226.7c5.9 11.9 20.3 16.7 32.2 10.7s16.7-20.3 10.7-32.2l-80-160zm-21.5 64.4l21.2 42.3-42.3 0 21.2-42.3zM288.5 312c0 13.3 10.7 24 24 24l86.1 0-103 103c-6.9 6.9-8.9 17.2-5.2 26.2S302.8 480 312.5 480l144 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-86.1 0 103-103c6.9-6.9 8.9-17.2 5.2-26.2S466.2 288 456.5 288l-144 0c-13.3 0-24 10.7-24 24zM145.5 39c-9.4-9.4-24.6-9.4-33.9 0l-88 88c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l47-47 0 342.1c0 13.3 10.7 24 24 24s24-10.7 24-24l0-342.1 47 47c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-88-88z"; 1852 exports.definition = { 1853 prefix, 1854 iconName, 1855 icon: [ 1856 width, 1857 height, 1858 aliases, 1859 unicode, 1860 svgPathData 1861 ] 1862 }; 1863 exports.faArrowUpAZ = exports.definition; 1864 exports.prefix = prefix; 1865 exports.iconName = iconName; 1866 exports.width = width; 1867 exports.height = height; 1868 exports.ligatures = aliases; 1869 exports.unicode = unicode; 1870 exports.svgPathData = svgPathData; 1871 exports.aliases = aliases; 1872})); 1873//#endregion 1874//#region node_modules/@fortawesome/pro-regular-svg-icons/faArrowUpArrowDown.js 1875var require_faArrowUpArrowDown = /* @__PURE__ */ __commonJSMin(((exports) => { 1876 Object.defineProperty(exports, "__esModule", { value: true }); 1877 var prefix = "far"; 1878 var iconName = "arrow-up-arrow-down"; 1879 var width = 512; 1880 var height = 512; 1881 var aliases = ["sort-up-down"]; 1882 var unicode = "e099"; 1883 var svgPathData = "M215.5 145c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9L145.5 7c-9.4-9.4-24.6-9.4-33.9 0L7.5 111c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l63-63 0 406.1c0 13.3 10.7 24 24 24s24-10.7 24-24l0-406.1 63 63zM471.5 367l-63 63 0-406.1c0-13.3-10.7-24-24-24s-24 10.7-24 24l0 406.1-63-63c-9.4-9.4-24.6-9.4-33.9 0s-9.4 24.6 0 33.9l104 104c9.4 9.4 24.6 9.4 33.9 0l104-104c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0z"; 1884 exports.definition = { 1885 prefix, 1886 iconName, 1887 icon: [ 1888 width, 1889 height, 1890 aliases, 1891 unicode, 1892 svgPathData 1893 ] 1894 }; 1895 exports.faArrowUpArrowDown = exports.definition; 1896 exports.prefix = prefix; 1897 exports.iconName = iconName; 1898 exports.width = width; 1899 exports.height = height; 1900 exports.ligatures = aliases; 1901 exports.unicode = unicode; 1902 exports.svgPathData = svgPathData; 1903 exports.aliases = aliases; 1904})); 1905//#endregion 1906//#region client/components/editor/Components/TruffleEditingWorkSpace/Components/Libraries/Components/TruffleMediaLibrary/TruffleMediaLibraryContext.ts 1907var import_faArrowDownWideShort = require_faArrowDownWideShort(); 1908var import_faArrowUpShortWide = require_faArrowUpShortWide(); 1909var import_faArrowDownAZ = require_faArrowDownAZ(); 1910var import_faArrowUpAZ = require_faArrowUpAZ(); 1911var import_faArrowUpArrowDown = require_faArrowUpArrowDown(); 1912var TruffleMediaLibraryContext = (0, import_react.createContext)({ 1913 searchValue: "", 1914 setSearchValue: () => {}, 1915 filterMediaType: MediaLibraryFilterMediaType.ALL, 1916 setFilterMediaType: () => {}, 1917 filterMediaSource: MediaLibraryFilterMediaSource.ALL, 1918 setFilterMediaSource: () => {}, 1919 filterStockOrientation: MediaLibraryFilterMediaOrientation.ALL, 1920 setFilterStockOrientation: () => {}, 1921 filterMinVideoDuration: 0, 1922 setFilterMinVideoDuration: () => {}, 1923 filterMaxVideoDuration: 600, 1924 setFilterMaxVideoDuration: () => {}, 1925 clearFilters: () => {}, 1926 sortBy: MediaLibrarySortBy.LAST_ADDED, 1927 setSortBy: () => {}, 1928 sortDirection: MediaLibrarySortDirection.TOP_TO_BOTTOM, 1929 setSortDirection: () => {}, 1930 stockSortOrder: GqlClientGettySortOrder.BEST_MATCH, 1931 setStockSortOrder: () => {}, 1932 activeTab: MediaLibraryActiveTab.YourLibrary, 1933 setActiveTab: () => {}, 1934 currentFolderId: null, 1935 setCurrentFolderId: () => {}, 1936 selectedItemData: null, 1937 setSelectedItemData: () => {}, 1938 uploadFileFn: async () => ({}), 1939 uploadFileFnAsync: async () => {}, 1940 multiSelectItems: null, 1941 enableMultiSelect: () => {}, 1942 disableMultiSelect: () => {}, 1943 addItemToMultiSelect: () => {}, 1944 removeItemFromMultiSelect: () => {}, 1945 trackingOrigin: "" 1946}); 1947//#endregion 1948//#region client/components/editor/Components/TruffleEditingWorkSpace/Components/Libraries/Components/TruffleMediaLibrary/ActionBar/SortAndFilter/SortButton.tsx 1949var popularIcon = new URL("data:image/svg+xml,%3csvg%20width='20'%20height='14'%20viewBox='0%200%2020%2014'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M6.20719%209.49219C6.48844%209.21094%206.95719%209.17969%207.20719%209.46094C7.51969%209.74219%207.51969%2010.2109%207.23844%2010.5234L4.26969%2013.7734C3.98844%2014.0859%203.45719%2014.0859%203.17594%2013.7734L0.207186%2010.5234C-0.0740645%2010.2109%20-0.0740645%209.74219%200.238436%209.46094C0.394686%209.33594%200.582186%209.27344%200.769686%209.27344C0.957186%209.27344%201.14469%209.33594%201.30094%209.49219L3.01969%2011.3359V0.773438C3.01969%200.335938%203.33219%20-0.0078125%203.76969%20-0.0078125C4.17594%20-0.0078125%204.51969%200.335938%204.51969%200.773438V11.3359L6.20719%209.49219Z'%20fill='black'%20fill-opacity='0.54'/%3e%3cpath%20d='M18.4258%205.0625C18.9844%205.14844%2019.2207%205.83594%2018.8125%206.26562L16.5352%208.45703L17.0723%2011.5723C17.1367%2012.0234%2016.793%2012.3887%2016.3848%2012.3887C16.2773%2012.3887%2016.1699%2012.3457%2016.0625%2012.3027L13.2695%2010.8203L10.4551%2012.3027C10.3477%2012.3457%2010.2402%2012.3672%2010.1328%2012.3672C9.72461%2012.3672%209.38086%2012.0234%209.44531%2011.5723L9.98242%208.43555L7.70508%206.24414C7.29688%205.83594%207.5332%205.14844%208.0918%205.0625L11.2285%204.61133L12.6465%201.75391C12.7754%201.49609%2013.0117%201.36719%2013.248%201.36719C13.5059%201.36719%2013.7422%201.49609%2013.8711%201.75391L15.2891%204.61133L18.4258%205.0625ZM15.4609%208.26367C15.4395%208.15625%2015.4824%208.04883%2015.5469%207.96289L17.5879%205.98633L14.7734%205.57812C14.666%205.55664%2014.5586%205.49219%2014.5156%205.38477L13.2695%202.82812L12.002%205.38477C11.959%205.49219%2011.8516%205.55664%2011.7441%205.57812L8.92969%205.98633L10.9707%207.96289C11.0352%208.04883%2011.0781%208.15625%2011.0566%208.26367L10.584%2011.0566L13.0977%209.74609C13.2051%209.68164%2013.3125%209.68164%2013.4199%209.74609L15.9336%2011.0566L15.4609%208.26367Z'%20fill='black'%20fill-opacity='0.54'/%3e%3cpath%20d='M18.4258%205.0625L18.4562%204.86482L18.4543%204.86454L18.4258%205.0625ZM18.8125%206.26562L18.9513%206.40988L18.9575%206.40337L18.8125%206.26562ZM16.5352%208.45703L16.3965%208.31292L16.32%208.38647L16.3381%208.49101L16.5352%208.45703ZM17.0723%2011.5723L17.2703%2011.544L17.2694%2011.5383L17.0723%2011.5723ZM16.0625%2012.3027L15.9687%2012.4794L15.9782%2012.4844L15.9882%2012.4884L16.0625%2012.3027ZM13.2695%2010.8203L13.3633%2010.6437L13.2699%2010.5941L13.1763%2010.6434L13.2695%2010.8203ZM10.4551%2012.3027L10.5294%2012.4884L10.539%2012.4846L10.5483%2012.4797L10.4551%2012.3027ZM9.44531%2011.5723L9.24811%2011.5385L9.24732%2011.544L9.44531%2011.5723ZM9.98242%208.43555L10.1796%208.4693L10.1974%208.36489L10.1211%208.29143L9.98242%208.43555ZM7.70508%206.24414L7.56363%206.38559L7.5664%206.38826L7.70508%206.24414ZM8.0918%205.0625L8.06332%204.86453L8.06139%204.86483L8.0918%205.0625ZM11.2285%204.61133L11.257%204.80929L11.361%204.79433L11.4077%204.70023L11.2285%204.61133ZM12.6465%201.75391L12.4676%201.66446L12.4673%201.665L12.6465%201.75391ZM13.8711%201.75391L14.0502%201.665L14.05%201.66446L13.8711%201.75391ZM15.2891%204.61133L15.1099%204.70023L15.1566%204.79433L15.2606%204.80929L15.2891%204.61133ZM15.4609%208.26367L15.6582%208.23029L15.6571%208.22445L15.4609%208.26367ZM15.5469%207.96289L15.4077%207.81922L15.3964%207.83023L15.3869%207.84289L15.5469%207.96289ZM17.5879%205.98633L17.727%206.13L18.0194%205.84683L17.6166%205.7884L17.5879%205.98633ZM14.7734%205.57812L14.7342%205.77452L14.7447%205.77605L14.7734%205.57812ZM14.5156%205.38477L14.7013%205.31049L14.6986%205.30371L14.6954%205.29714L14.5156%205.38477ZM13.2695%202.82812L13.4493%202.7405L13.2711%202.37478L13.0903%202.73929L13.2695%202.82812ZM12.002%205.38477L11.8228%205.29593L11.8192%205.30308L11.8163%205.31049L12.002%205.38477ZM11.7441%205.57812L11.7729%205.77634L11.7834%205.77424L11.7441%205.57812ZM8.92969%205.98633L8.90098%205.7884L8.49814%205.84683L8.79055%206.13L8.92969%205.98633ZM10.9707%207.96289L11.1307%207.84289L11.1212%207.83023L11.1098%207.81922L10.9707%207.96289ZM11.0566%208.26367L10.8604%208.22443L10.8594%208.2303L11.0566%208.26367ZM10.584%2011.0566L10.3868%2011.0233L10.3196%2011.42L10.6764%2011.234L10.584%2011.0566ZM13.0977%209.74609L13.1903%209.92376L13.2006%209.91759L13.0977%209.74609ZM13.4199%209.74609L13.3168%209.9179L13.3275%209.92344L13.4199%209.74609ZM15.9336%2011.0566L15.8411%2011.234L16.1979%2011.42L16.1308%2011.0233L15.9336%2011.0566ZM18.3954%205.26017C18.7882%205.32061%2018.9688%205.810
194972%2018.6675%206.12788L18.9575%206.40337C19.4726%205.86116%2019.1805%204.97626%2018.4562%204.86483L18.3954%205.26017ZM18.6738%206.12151L16.3965%208.31292L16.6738%208.60115L18.9512%206.40974L18.6738%206.12151ZM16.3381%208.49101L16.8752%2011.6062L17.2694%2011.5383L16.7322%208.42305L16.3381%208.49101ZM16.8743%2011.6005C16.9213%2011.93%2016.6725%2012.1887%2016.3848%2012.1887V12.5887C16.9134%2012.5887%2017.3521%2012.1169%2017.2703%2011.544L16.8743%2011.6005ZM16.3848%2012.1887C16.323%2012.1887%2016.2527%2012.1634%2016.1368%2012.117L15.9882%2012.4884C16.0871%2012.528%2016.2317%2012.5887%2016.3848%2012.5887V12.1887ZM16.1563%2012.1261L13.3633%2010.6437L13.1758%2010.997L15.9687%2012.4794L16.1563%2012.1261ZM13.1763%2010.6434L10.3619%2012.1258L10.5483%2012.4797L13.3627%2010.9973L13.1763%2010.6434ZM10.3808%2012.117C10.2952%2012.1513%2010.2129%2012.1672%2010.1328%2012.1672V12.5672C10.2676%2012.5672%2010.4001%2012.5401%2010.5294%2012.4884L10.3808%2012.117ZM10.1328%2012.1672C9.83749%2012.1672%209.59729%2011.9227%209.6433%2011.6005L9.24732%2011.544C9.16443%2012.1242%209.61172%2012.5672%2010.1328%2012.5672V12.1672ZM9.64244%2011.606L10.1796%208.4693L9.78529%208.40179L9.24818%2011.5385L9.64244%2011.606ZM10.1211%208.29143L7.84375%206.10003L7.5664%206.38826L9.84375%208.57966L10.1211%208.29143ZM7.8465%206.10272C7.55637%205.81259%207.72239%205.32168%208.12221%205.26017L8.06139%204.86483C7.34402%204.97519%207.03738%205.85928%207.56366%206.38556L7.8465%206.10272ZM8.12027%205.26046L11.257%204.80929L11.2%204.41337L8.06332%204.86454L8.12027%205.26046ZM11.4077%204.70023L12.8256%201.84281L12.4673%201.665L11.0494%204.52242L11.4077%204.70023ZM12.8254%201.84335C12.9201%201.65383%2013.0869%201.56719%2013.248%201.56719V1.16719C12.9366%201.16719%2012.6307%201.33836%2012.4676%201.66446L12.8254%201.84335ZM13.248%201.56719C13.4343%201.56719%2013.599%201.65694%2013.6922%201.84335L14.05%201.66446C13.8854%201.33525%2013.5774%201.16719%2013.248%201.16719V1.56719ZM13.6919%201.84281L15.1099%204.70023L15.4682%204.52242L14.0502%201.665L13.6919%201.84281ZM15.2606%204.80929L18.3973%205.26046L18.4543%204.86454L15.3175%204.41337L15.2606%204.80929ZM15.6571%208.22445C15.651%208.19432%2015.6607%208.14443%2015.7069%208.08289L15.3869%207.84289C15.3041%207.95322%2015.2279%208.11818%2015.2648%208.3029L15.6571%208.22445ZM15.686%208.10656L17.727%206.13L17.4488%205.84266L15.4077%207.81922L15.686%208.10656ZM17.6166%205.7884L14.8021%205.3802L14.7447%205.77605L17.5592%206.18426L17.6166%205.7884ZM14.8127%205.38201C14.7463%205.36873%2014.7109%205.33451%2014.7013%205.31049L14.3299%205.45904C14.4063%205.64986%2014.5858%205.74455%2014.7342%205.77424L14.8127%205.38201ZM14.6954%205.29714L13.4493%202.7405L13.0897%202.91575L14.3358%205.47239L14.6954%205.29714ZM13.0903%202.73929L11.8228%205.29593L12.1811%205.47361L13.4487%202.91696L13.0903%202.73929ZM11.8163%205.31049C11.8066%205.33451%2011.7713%205.36873%2011.7049%205.38201L11.7834%205.77424C11.9318%205.74455%2012.1113%205.64986%2012.1876%205.45904L11.8163%205.31049ZM11.7154%205.3802L8.90098%205.7884L8.95839%206.18426L11.7728%205.77605L11.7154%205.3802ZM8.79055%206.13L10.8316%208.10656L11.1098%207.81922L9.06882%205.84266L8.79055%206.13ZM10.8107%208.08289C10.8569%208.14443%2010.8665%208.19432%2010.8605%208.22445L11.2528%208.3029C11.2897%208.11818%2011.2135%207.95322%2011.1307%207.84289L10.8107%208.08289ZM10.8594%208.2303L10.3868%2011.0233L10.7812%2011.09L11.2538%208.29704L10.8594%208.2303ZM10.6764%2011.234L13.1901%209.92344L13.0052%209.56875L10.4915%2010.8793L10.6764%2011.234ZM13.2006%209.91759C13.2284%209.90088%2013.247%209.89775%2013.2588%209.89775C13.2706%209.89775%2013.2892%209.90088%2013.317%209.91759L13.5228%209.5746C13.4433%209.52686%2013.3544%209.49775%2013.2588%209.49775C13.1632%209.49775%2013.0743%209.52686%2012.9948%209.5746L13.2006%209.91759ZM13.3275%209.92344L15.8411%2011.234L16.0261%2010.8793L13.5124%209.56875L13.3275%209.92344ZM16.1308%2011.0233L15.6581%208.2303L15.2637%208.29704L15.7364%2011.09L16.1308%2011.0233Z'%20fill='black'%20fill-opacity='0.54'/%3e%3c/svg%3e", "" + import.meta.url).href; 1950var SORT_OPTIONS = [ 1951 { 1952 label: "Newest", 1953 value: MediaLibrarySortBy.LAST_ADDED, 1954 dataTrackingId: "tracking-id-media-lib-sort-newest", 1955 icon: import_faArrowDownWideShort.faArrowDownWideShort, 1956 sortDirection: MediaLibrarySortDirection.TOP_TO_BOTTOM 1957 }, 1958 { 1959 label: "Oldest", 1960 value: MediaLibrarySortBy.LAST_ADDED, 1961 dataTrackingId: "tracking-id-media-lib-sort-oldest", 1962 icon: import_faArrowUpShortWide.faArrowUpShortWide, 1963 sortDirection: MediaLibrarySortDirection.BOTTOM_TO_TOP 1964 }, 1965 { 1966 label: "A-Z", 1967 value: MediaLibrarySortBy.A_Z, 1968 dataTrackingId: "tracking-id-media-lib-sort-a-z", 1969 icon: import_faArrowDownAZ.faArrowDownAZ, 1970 sortDirection: MediaLibrarySortDirection.TOP_TO_BOTTOM 1971 }, 1972 { 1973 label: "Z-A", 1974 value: MediaLibrarySortBy.A_Z, 1975 dataTrackingId: "tracking-id-media-lib-sort-z-a", 1976 icon: import_faArrowUpAZ.faArrowUpAZ, 1977 sortDirection: MediaLibrarySortDirection.BOTTOM_TO_TOP 1978 } 1979]; 1980var SORT_BY_OPTIONS = { 1981 [MediaLibraryActiveTab.YourLibrary]: SORT_OPTIONS, 1982 [MediaLibraryActiveTab.Dam]: SORT_OPTIONS, 1983 [MediaLibraryActiveTab.Stock]: [ 1984 { 1985 label: "Best match", 1986 value: GqlClientGettySortOrder.BEST_MATCH, 1987 dataTrackingId: "tracking-id-media-lib-sort-best-match", 1988 icon: import_faArrowUpArrowDown.faArrowUpArrowDown 1989 }, 1990 { 1991 label: "Newest", 1992 value: GqlClientGettySortOrder.NEWEST, 1993 dataTrackingId: "tracking-id-media-lib-sort-newest", 1994 icon: import_faArrowDownWideShort.faArrowDownWideShort 1995 }, 1996 { 1997 label: "Oldest", 1998 value: GqlClientGettySortOrder.OLDEST, 1999 dataTrackingId: "tracking-id-media-lib-sort-oldest", 2000 icon: import_faArrowUpShortWide.faArrowUpShortWide 2001 }, 2002 { 2003 label: "Most popular", 2004 value: GqlClientGettySortOrder.MOST_POPULAR, 2005 dataTrackingId: "tracking-id-media-lib-sort-most-popular", 2006 icon: import_faArrowUpArrowDown.faArrowUpArrowDown, 2007 customIcon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("img", { 2008 src: popularIcon, 2009 alt: "most popular icon" 2010 }) 2011 } 2012 ] 2013}; 2014var SortButton = (props) => { 2015 const { sortBy: appliedSortBy, setSortBy, sortDirection: appliedSortDirection, setSortDirection, stockSortOrder: appliedStockSortOrder, setStockSortOrder } = (0, import_react.useContext)(TruffleMediaLibraryContext); 2016 const [anchor, setAnchor] = (0, import_react.useState)(null); 2017 const handleButtonClick = (e) => { 2018 setAnchor(e.currentTarget); 2019 }; 2020 let iconForButton = props.activeTab === MediaLibraryActiveTab.YourLibrary ? /* @__P
2020URE__ */ (0, import_jsx_runtime.jsx)(FontAwesomeIcon, { icon: import_faArrowDownWideShort.faArrowDownWideShort }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FontAwesomeIcon, { icon: import_faArrowUpArrowDown.faArrowUpArrowDown }); 2021 const options = SORT_BY_OPTIONS[props.activeTab]; 2022 if (props.activeTab === MediaLibraryActiveTab.Stock) { 2023 const selectedSortOrder = options.find((option) => option.value === appliedStockSortOrder); 2024 iconForButton = selectedSortOrder ? selectedSortOrder.customIcon ? selectedSortOrder.customIcon : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FontAwesomeIcon, { icon: selectedSortOrder.icon }) : iconForButton; 2025 } else { 2026 const selectedSortOrder = options.find((option) => option.value === appliedSortBy && option.sortDirection === appliedSortDirection); 2027 iconForButton = selectedSortOrder ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FontAwesomeIcon, { icon: selectedSortOrder.icon }) : iconForButton; 2028 } 2029 const isOptionSelected = (sortValue, sortDirection) => { 2030 if (props.activeTab === MediaLibraryActiveTab.Stock) return sortValue === appliedStockSortOrder; 2031 else return sortValue === appliedSortBy && sortDirection === appliedSortDirection; 2032 }; 2033 return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Tooltip, { 2034 placement: "top", 2035 title: "Sort", 2036 arrow: true, 2037 children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.IconButton, { 2038 color: "primary", 2039 sx: buttonSxProps, 2040 onClick: handleButtonClick, 2041 "data-tracking-id": "tracking-id-media-lib-sort-btn", 2042 disabled: props.disabled, 2043 children: iconForButton 2044 }) 2045 }
2045), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Menu, { 2046 open: !!anchor, 2047 anchorEl: anchor, 2048 onClose: () => setAnchor(null), 2049 PaperProps: { sx: { minWidth: "165px" } }, 2050 children: options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_dist$3.TruffleMenuItem, { 2051 dense: true, 2052 "data-tracking-id": option.dataTrackingId, 2053 selected: isOptionSelected(option.value, option.sortDirection), 2054 onClick: () => { 2055 if (props.activeTab === MediaLibraryActiveTab.Stock) setStockSortOrder(option.value); 2056 else { 2057 setSortBy(option.value); 2058 setSortDirection(option.sortDirection); 2059 } 2060 setAnchor(null); 2061 }, 2062 children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.ListItemIcon, { children: option.customIcon || /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FontAwesomeIcon, { icon: option.icon }) }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.ListItemText, { primary: option.label })] 2063 }, option.label)) 2064 })] }); 2065}; 2066var buttonSxProps = { 2067 width: "32px", 2068 height: "32px", 2069 "& svg": { 2070 width: "16px", 2071 height: "16px" 2072 }, 2073 "&:not([disabled]):not(:hover)": { color: "action.active" } 2074}; 2075//#endregion 2076//#region node_modules/react-number-format/dist/react-number-format.es.js 2077/** 2078* react-number-format - 5.1.4 2079* Author : Sudhanshu Yadav 2080* Copyright (c) 2016, 2023 to Sudhanshu Yadav, released under the MIT license. 2081* https://github.com/s-yadav/react-number-format 2082*/ 2083/****************************************************************************** 2084Copyright (c) Microsoft Corporation. 2085 2086Permission to use, copy, modify, and/or distribute this software for any 2087purpose with or without fee is hereby granted. 2088 2089THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH 2090REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY 2091AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, 2092INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM 2093LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR 2094OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR 2095PERFORMANCE OF THIS SOFTWARE. 2096***************************************************************************** */ 2097function __rest(s, e) { 2098 var t = {}; 2099 for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p]; 2100 if (s != null && typeof Object.getOwnPropertySymbols === "function") { 2101 for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]]; 2102 } 2103 return t; 2104} 2105var SourceType; 2106(function(SourceType) { 2107 SourceType["event"] = "event";
2108 SourceType["props"] = "prop"; 2109})(SourceType || (SourceType = {})); 2110function noop() {} 2111function charIsNumber(char) { 2112 return !!(char || "").match(/\d/); 2113} 2114function isNil(val) { 2115 return val === null || val === void 0; 2116} 2117function isNanValue(val) { 2118 return typeof val === "number" && isNaN(val); 2119} 2120function escapeRegExp(str) { 2121 return str.replace(/[-[\]/{}()*+?.\\^$|]/g, "\\$&"); 2122} 2123function getThousandsGroupRegex(thousandsGroupStyle) { 2124 switch (thousandsGroupStyle) { 2125 case "lakh": return /(\d+?)(?=(\d\d)+(\d)(?!\d))(\.\d+)?/g; 2126 case "wan": return /(\d)(?=(\d{4})+(?!\d))/g; 2127 default: return /(\d)(?=(\d{3})+(?!\d))/g; 2128 } 2129} 2130function applyThousandSeparator(str, thousandSeparator, thousandsGroupStyle) { 2131 var thousandsGroupRegex = getThousandsGroupRegex(thousandsGroupStyle); 2132 var index = str.search(/[1-9]/); 2133 index = index === -1 ? str.length : index; 2134 return str.substring(0, index) + str.substring(index, str.length).replace(thousandsGroupRegex, "$1" + thousandSeparator); 2135} 2136function usePersistentCallback(cb) { 2137 var callbackRef = (0, import_react.useRef)(cb); 2138 callbackRef.current = cb; 2139 return (0, import_react.useRef)(function() { 2140 var args = [], len = arguments.length; 2141 while (len--) args[len] = arguments[len]; 2142 return callbackRef.current.apply(callbackRef, args); 2143 }).current; 2144} 2145function splitDecimal(numStr, allowNegative) { 2146 if (allowNegative === void 0) allowNegative = true; 2147 var hasNegation = numStr[0] === "-"; 2148 var addNegation = hasNegation && allowNegative; 2149 numStr = numStr.replace("-", ""); 2150 var parts = numStr.split("."); 2151 return { 2152 beforeDecimal: parts[0], 2153 afterDecimal: parts[1] || "", 2154 hasNegation, 2155 addNegation 2156 }; 2157} 2158function fixLeadingZero(numStr) { 2159 if (!numStr) return numStr; 2160 var isNegative = numStr[0] === "-"; 2161 if (isNegative) numStr = numStr.substring(1, numStr.length); 2162 var parts = numStr.split("."); 2163 var beforeDecimal = parts[0].replace(/^0+/, "") || "0"; 2164 var afterDecimal = parts[1] || ""; 2165 return (isNegative ? "-" : "") + beforeDecimal + (afterDecimal ? "." + afterDecimal : ""); 2166} 2167/** 2168* limit decimal numbers to given scale 2169* Not used .fixedTo because that will break with big numbers 2170*/ 2171function limitToScale(numStr, scale, fixedDecimalScale) { 2172 var str = ""; 2173 var filler = fixedDecimalScale ? "0" : ""; 2174 for (var i = 0; i <= scale - 1; i++) str += numStr[i] || filler; 2175 return str; 2176} 2177function repeat(str, count) { 2178 return Array(count + 1).join(str); 2179} 2180function toNumericString(num) { 2181 var _num = num + ""; 2182 var sign = _num[0] === "-" ? "-" : ""; 2183 if (sign) _num = _num.substring(1); 2184 var ref = _num.split(/[eE]/g); 2185 var coefficient = ref[0]; 2186 var exponent = ref[1]; 2187 exponent = Number(exponent); 2188 if (!exponent) return sign + coefficient; 2189 coefficient = coefficient.replace(".", ""); 2190 /** 2191 * for scientific notation the current decimal index will be after first number (index 0) 2192 * So effective decimal index will always be 1 + exponent value 2193 */ 2194 var decimalIndex = 1 + exponent; 2195 var coffiecientLn = coefficient.length; 2196 if (decimalIndex < 0) coefficient = "0." + repeat("0", Math.abs(decimalIndex)) + coefficient; 2197 else if (decimalIndex >= coffiecientLn) coefficient = coefficient + repeat("0", decimalIndex - coffiecientLn); 2198 else coefficient = (coefficient.substring(0, decimalIndex) || "0") + "." + coefficient.substring(decimalIndex); 2199 return sign + coefficient; 2200} 2201/** 2202* This method is required to round prop value to given scale. 2203* Not used .round or .fixedTo because that will break with big numbers 2204*/ 2205function roundToPrecision(numStr, scale, fixedDecimalScale) { 2206 if (["", "-"].indexOf(numStr) !== -1) return numStr; 2207 var shouldHaveDecimalSeparator = (numStr.indexOf(".") !== -1 || fixedDecimalScale) && scale; 2208 var ref = splitDecimal(numStr); 2209 var beforeDecimal = ref.beforeDecimal; 2210 var afterDecimal = ref.afterDecimal; 2211 var hasNegation = ref.hasNegation; 2212 var floatValue = parseFloat("0." + (afterDecimal || "0")); 2213 var roundedDecimalParts = (afterDecimal.length <= scale ? "0." + afterDecimal : floatValue.toFixed(scale)).split("."); 2214 var intPart = beforeDecimal.split("").reverse().reduce(function(roundedStr, current, idx) { 2215 if (roundedStr.length > idx) return (Number(roundedStr[0]) + Number(current)).toString() + roundedStr.substring(1, roun
2215dedStr.length); 2216 return current + roundedStr; 2217 }, roundedDecimalParts[0]); 2218 var decimalPart = limitToScale(roundedDecimalParts[1] || "", scale, fixedDecimalScale); 2219 var negation = hasNegation ? "-" : ""; 2220 var decimalSeparator = shouldHaveDecimalSeparator ? "." : ""; 2221 return "" + negation + intPart + decimalSeparator + decimalPart; 2222} 2223/** set the caret positon in an input field **/ 2224function setCaretPosition(el, caretPos) { 2225 el.value = el.value; 2226 if (el !== null) { 2227 if (el.createTextRange) { 2228 var range = el.createTextRange(); 2229 range.move("character", caretPos); 2230 range.select(); 2231 return true; 2232 } 2233 if (el.selectionStart || el.selectionStart === 0) { 2234 el.focus(); 2235 el.setSelectionRange(caretPos, caretPos); 2236 return true; 2237 } 2238 el.focus(); 2239 return false; 2240 } 2241} 2242function findChangeRange(prevValue, newValue) { 2243 var i = 0, j = 0; 2244 var prevLength = prevValue.length; 2245 var newLength = newValue.length; 2246 while (prevValue[i] === newValue[i] && i < prevLength) i++; 2247 while (prevValue[prevLength - 1 - j] === newValue[newLength - 1 - j] && newLength - j > i && prevLength - j > i) j++; 2248 return { 2249 from: { 2250 start: i, 2251 end: prevLength - j 2252 }, 2253 to: { 2254 start: i, 2255 end: newLength - j 2256 } 2257 }; 2258} 2259function clamp(num, min, max) { 2260 return Math.min(Math.max(num, min), max); 2261} 2262function geInputCaretPosition(el) { 2263 return Math.max(el.selectionStart, el.selectionEnd); 2264} 2265function addInputMode() { 2266 return typeof navigator !== "undefined" && !(navigator.platform && /iPhone|iPod/.test(navigator.platform)); 2267} 2268function getDefaultChangeMeta(value) { 2269 return { 2270 from: { 2271 start: 0, 2272 end: 0 2273 }, 2274 to: { 2275 start: 0, 2276 end: value.length 2277 }, 2278 lastValue: "" 2279 }; 2280} 2281function getCaretPosition(newFormattedValue, lastFormattedValue, curValue, curCaretPos, boundary, isValidInputCharacter) { 2282 /** 2283 * if something got inserted on empty value, add the formatted character before the current value, 2284 * This is to avoid the case where typed character is present on format characters 2285 */ 2286 var firstAllowedPosition = boundary.findIndex(function(b) { 2287 return b; 2288 }); 2289 var prefixFormat = newFormattedValue.slice(0, firstAllowedPosition); 2290 if (!lastFormattedValue && !curValue.startsWith(prefixFormat)) { 2291 curValue = prefixFormat + curValue; 2292 curCaretPos = curCaretPos + prefixFormat.length; 2293 } 2294 var curValLn = curValue.length; 2295 var formattedValueLn = newFormattedValue.length; 2296 var addedIndexMap = {}; 2297 var indexMap = new Array(curValLn); 2298 for (var i = 0; i < curValLn; i++) { 2299 indexMap[i] = -1; 2300 for (var j = 0, jLn = formattedValueLn; j < jLn; j++) if (curValue[i] === newFormattedValue[j] && addedIndexMap[j] !== true) { 2301 indexMap[i] = j; 2302 addedIndexMap[j] = true; 2303 break; 2304 } 2305 } 2306 /** 2307 * For current caret position find closest characters (left and right side) 2308 * which are properly mapped to formatted value. 2309 * The idea is that the new caret position will exist always in the boundary of 2310 * that mapped index 2311 */ 2312 var pos = curCaretPos; 2313 while (pos < curValLn && (indexMap[pos] === -1 || !isValidInputCharacter(curValue[pos]))) pos++; 2314 var endIndex = pos === curValLn || indexMap[pos] === -1 ? formattedValueLn : indexMap[pos]; 2315 pos = curCaretPos - 1; 2316 while (pos > 0 && indexMap[pos] === -1) pos--; 2317 var startIndex = pos === -1 || indexMap[pos] === -1 ? 0 : indexMap[pos] + 1; 2318 /** 2319 * case where a char is added on suffix and removed from middle, example 2sq345 becoming $2,345 sq 2320 * there is still a mapping but the order of start index and end index is changed 2321 */ 2322 if (startIndex > endIndex) return endIndex; 2323 /** 2324 * given the current caret position if it closer to startIndex 2325 * keep the new caret position on start index or keep it closer to endIndex 2326 */ 2327 return curCaretPos - startIndex < endIndex - curCaretPos ? startIndex : endIndex; 2328} 2329function getCaretPosInBoundary(value, caretPos, boundary, direction) { 2330 var valLn = value.length; 2331 caretPos = clamp(caretPos, 0, valLn); 2332 if (direction === "left") { 2333 while (caretPos >= 0 && !boundary[caretPos]) caretPos--; 2334 if (caretPos === -1) caretPos = boundary.indexOf(true); 2335 } else { 2336 while (caretPos <= valLn && !boundary[caretPos]) caretPos++; 2337 if (caretPos > valLn) caretPos = boundary.lastIndexOf(true); 2338 } 2339 if (caretPos === -1) caretPos = valLn; 2340 return caretPos; 2341} 2342function caretUnknownFormatBoundary(formattedValue) { 2343 var boundaryAry = Array.from({ length: formattedValue.length + 1 }).map(function() { 2344 return true; 2345 }); 2346 for (var i = 0, ln = boundaryAry.length; i < ln; i++) boundaryAry[i] = Boolean(charIsNumber(formattedValue[i]) || charIsNumber(formattedValue[i - 1])); 2347 return boundaryAry; 2348} 2349function useInternalValues(value, defaultValue, valueIsNumericString, format, removeFormatting, onValueChange) { 2350 if (onValueChange === void 0) onValueChange = noop; 2351 var propValues = (0, import_react.useRef)(); 2352 var getValues = usePersistentCallback(function(value) { 2353 var formattedValue, numAsString; 2354 if (isNil(value) || isNanValue(value)) { 2355 numAsString = ""; 2356 formattedValue = ""; 2357 } else if (typeof value === "number" || valueIsNumericString) { 2358 numAsString = typeof value === "number" ? toNumericString(value) : value; 2359 formattedValue = format(numAsString); 2360 } else { 2361 numAsString = removeFormatting(value, void 0); 2362 formattedValue = value; 2363 } 2364 return { 2365 formattedValue, 2366 numAsString 2367 }; 2368 }); 2369 var ref = (0, import_react.useState)(function() { 2370 return getValues(defaultValue); 2371 }); 2372 var values = ref[0]; 2373 var setValues = ref[1]; 2374 var _onValueChange = function(values, sourceInfo) { 2375 setValues({ 2376 formattedValue: values.formattedValue, 2377 numAsString: values.value 2378 }); 2379 onValueChange(values, sourceInfo); 2380 }; 2381 (0, import_react.useMemo)(function() { 2382 if (!isNil(value)) { 2383 propValues.current = getValues(value); 2384 setValues(propValues.current); 2385 } else propValues.current = void 0; 2386 }, [value, getValues]); 2387 return [values, _onValueChange]; 2388} 2389function defaultRemoveFormatting(value) { 2390 return value.replace(/[^0-9]/g, ""); 2391} 2392function defaultFormat(value) { 2393 return value; 2394} 2395function NumberFormatBase(props) { 2396 var type = props.type; 2397 if (type === void 0) type = "text"; 2398 var displayType = props.displayType; 2399 if (displayType === void 0) displayType = "input"; 2400 var customInput = props.customInput; 2401 var renderText = props.renderText; 2402 var getInputRef = props.getInputRef; 2403 var format = props.format; 2404 if (format === void 0) format = defaultFormat; 2405 var removeFormatting = props.removeFormatting; 2406 if (removeFormatting === void 0) removeFormatting = defaultRemoveFormatting; 2407 var defaultValue = props.defaultValue; 2408 var valueIsNumericString = props.valueIsNumericString; 2409 var onValueChange = props.onValueChange; 2410 var isAllowed = props.isAllowed; 2411 var onChange = props.onChange; 2412 if (onChange === void 0) onChange = noop; 2413 var onKeyDown = props.onKeyDown; 2414 if (onKeyDown === void 0) onKeyDown = noop; 2415 var onMouseUp = props.onMouseUp; 2416 if (onMouseUp === void 0) onMouseUp = noop; 2417 var onFocus = props.onFocus; 2418 if (onFocus === void 0) onFocus = noop; 2419 var onBlur = props.onBlur; 2420 if (onBlur === void 0) onBlur = noop; 2421 var propValue = props.value; 2422 var getCaretBoundary = props.getCaretBoundary; 2423 if (getCaretBoundary === void 0) getCaretBoundary = caretUnknownFormatBoundary; 2424 var isValidInputCharacter = props.isValidInputCharacter; 2425 if (isValidInputCharacter === void 0) isValidInputCharacter = charIsNumber; 2426 var otherProps = __rest(props, [ 2427 "type", 2428 "displayType", 2429 "customInput", 2430 "renderText", 2431 "getInputRef", 2432 "format", 2433 "removeFormatting", 2434 "defaultValue", 2435 "valueIsNumericString", 2436 "onValueChange", 2437 "isAllowed", 2438 "onChange", 2439 "onKeyDown", 2440 "onMouseUp", 2441 "onFocus", 2442 "onBlur", 2443 "value", 2444 "getCaretBoundary", 2445 "isValidInputCharacter" 2446 ]); 2447 var ref = useInternalValues(propValue, defaultValue, Boolean(valueIsNumericString), format, removeFormatting, onValueChange); 2448 var ref_0 = ref[0]; 2449 var formattedValue = ref_0.formattedValue; 2450 var numAsString = ref_0.numAsString; 2451 var onFormattedValueChange = ref[1]; 2452 var lastUpdatedValue = (0, import_react.useRef)(); 2453 var _onValueChange = function(values, source) { 2454 lastUpdatedValue.current = values.formattedValue; 2455 onFormattedValueChange(values, source); 2456 }; 2457 (0, import_react.useEffect)(function() { 2458 var newFormattedValue = format(numAsString); 2459 if (lastUpdatedValue.current === void 0 || newFormattedValue !== lastUpdatedValue.current) { 2460 var input = focusedElm.current;
2461 updateValue({ 2462 formattedValue: newFormattedValue, 2463 numAsString: removeFormatting(newFormattedValue, void 0), 2464 input, 2465 setCaretPosition: true, 2466 source: SourceType.props, 2467 event: void 0 2468 }); 2469 } 2470 }); 2471 var ref$1 = (0, import_react.useState)(false); 2472 var mounted = ref$1[0]; 2473 var setMounted = ref$1[1]; 2474 var focusedElm = (0, import_react.useRef)(null); 2475 var timeout = (0, import_react.useRef)({ 2476 setCaretTimeout: null, 2477 focusTimeout: null 2478 }); 2479 (0, import_react.useEffect)(function() { 2480 setMounted(true); 2481 return function() { 2482 clearTimeout(timeout.current.setCaretTimeout); 2483 clearTimeout(timeout.current.focusTimeout); 2484 }; 2485 }, []); 2486 var _format = format; 2487 var getValueObject = function(formattedValue, numAsString) { 2488 var floatValue = parseFloat(numAsString); 2489 return { 2490 formattedValue, 2491 value: numAsString, 2492 floatValue: isNaN(floatValue) ? void 0 : floatValue 2493 }; 2494 }; 2495 var setPatchedCaretPosition = function(el, caretPos, currentValue) { 2496 setCaretPosition(el, caretPos); 2497 timeout.current.setCaretTimeout = setTimeout(function() { 2498 if (el.value === currentValue) setCaretPosition(el, caretPos); 2499 }, 0); 2500 }; 2501 var correctCaretPosition = function(value, caretPos, direction) { 2502 return getCaretPosInBoundary(value, caretPos, getCaretBoundary(value), direction); 2503 }; 2504 var getNewCaretPosition = function(inputValue, newFormattedValue, caretPos) { 2505 var caretBoundary = getCaretBoundary(newFormattedValue); 2506 var updatedCaretPos = getCaretPosition(newFormattedValue, formattedValue, inputValue, caretPos, caretBoundary, isValidInputCharacter); 2507 updatedCaretPos = getCaretPosInBoundary(newFormattedValue, updatedCaretPos, caretBoundary); 2508 return updatedCaretPos; 2509 }; 2510 var updateValue = function(params) { 2511 var newFormattedValue = params.formattedValue; 2512 if (newFormattedValue === void 0) newFormattedValue = ""; 2513 var input = params.input; 2514 var setCaretPosition = params.setCaretPosition; 2515 if (setCaretPosition === void 0) setCaretPosition = true; 2516 var source = params.source; 2517 var event = params.event; 2518 var numAsString = params.numAsString; 2519 var caretPos = params.caretPos; 2520 if (input) { 2521 if (caretPos === void 0 && setCaretPosition) { 2522 var inputValue = params.inputValue || input.value; 2523 var currentCaretPosition = geInputCaretPosition(input); 2524 /** 2525 * set the value imperatively, this is required for IE fix 2526 * This is also required as if new caret position is beyond the previous value. 2527 * Caret position will not be set correctly 2528 */ 2529 input.value = newFormattedValue; 2530 caretPos = getNewCaretPosition(inputValue, newFormattedValue, currentCaretPosition); 2531 } 2532 /** 2533 * set the value imperatively, as we set the caret position as well imperatively. 2534 * This is to keep value and caret position in sync 2535 */ 2536 input.value = newFormattedValue; 2537 if (setCaretPosition && caretPos !== void 0) setPatchedCaretPosition(input, caretPos, newFormattedValue); 2538 } 2539 if (newFormattedValue !== formattedValue) _onValueChange(getValueObject(newFormattedValue, numAsString), { 2540 event, 2541 source 2542 }); 2543 }; 2544 var formatInputValue = function(inputValue, event, source) { 2545 var changeRange = findChangeRange(formattedValue, inputValue); 2546 var changeMeta = Object.assign(Object.assign({}, changeRange), { lastValue: formattedValue }); 2547 var _numAsString = removeFormatting(inputValue, changeMeta); 2548 var _formattedValue = _format(_numAsString); 2549 _numAsString = removeFormatting(_formattedValue, void 0); 2550 if (isAllowed && !isAllowed(getValueObject(_formattedValue, _numAsString))) { 2551 var input = event.target; 2552 setPatchedCaretPosition(input, getNewCaretPosition(inputValue, formattedValue, geInputCaretPosition(input)), formattedValue); 2553 return false; 2554 } 2555 updateValue({ 2556 formattedValue: _formattedValue, 2557 numAsString: _numAsString, 2558 inputValue, 2559 event, 2560 source, 2561 setCaretPosition: true, 2562 input: event.target 2563 }); 2564 return true; 2565 }; 2566 var _onChange = function(e) { 2567 var inputValue = e.target.value; 2568 if (formatInputValue(inputValue, e, SourceType.event)) onChange(e); 2569 }; 2570 var _onKeyDown = function(e) { 2571 var el = e.target; 2572 var key = e.key; 2573 var selectionStart = el.selectionStart; 2574 var selectionEnd = el.selectionEnd; 2575 var value = el.value; 2576 if (value === void 0) value = ""; 2577 var expectedCaretPosition; 2578 if (key === "ArrowLeft" || key === "Backspace") expectedCaretPosition = Math.max(selectionStart - 1, 0); 2579 else if (key === "ArrowRight") expectedCaretPosition = Math.min(selectionStart + 1, value.length); 2580 else if (key === "Delete") expectedCaretPosition = selectionStart; 2581 if (expectedCaretPosition === void 0 || selectionStart !== selectionEnd) { 2582 onKeyDown(e); 2583 return; 2584 } 2585 var newCaretPosition = expectedCaretPosition; 2586 if (key === "ArrowLeft" || key === "ArrowRight") newCaretPosition = correctCaretPosition(value, expectedCaretPosition, key === "ArrowLeft" ? "left" : "right"); 2587 else if (key === "Delete" && !isValidInputCharacter(value[expectedCaretPosition])) newCaretPosition = correctCaretPosition(value, expectedCaretPosition, "right"); 2588 else if (key === "Backspace" && !isValidInputCharacter(value[expectedCaretPosition])) newCaretPosition = correctCaretPosition(value, expectedCaretPosition, "left"); 2589 if (newCaretPosition !== expectedCaretPosition) setPatchedCaretPosition(el, newCaretPosition, value); 2590 if (e.isUnitTestRun) setPatchedCaretPosition(el, newCaretPosition, value); 2591 onKeyDown(e); 2592 };
2593 /** required to handle the caret position when click anywhere within the input **/ 2594 var _onMouseUp = function(e) { 2595 var el = e.target; 2596 /** 2597 * NOTE: we have to give default value for value as in case when custom input is provided 2598 * value can come as undefined when nothing is provided on value prop. 2599 */ 2600 var selectionStart = el.selectionStart; 2601 var selectionEnd = el.selectionEnd; 2602 var value = el.value; 2603 if (value === void 0) value = ""; 2604 if (selectionStart === selectionEnd) { 2605 var caretPosition = correctCaretPosition(value, selectionStart); 2606 if (caretPosition !== selectionStart) setPatchedCaretPosition(el, caretPosition, value); 2607 } 2608 onMouseUp(e); 2609 }; 2610 var _onFocus = function(e) { 2611 if (e.persist) e.persist(); 2612 var el = e.target; 2613 focusedElm.current = el; 2614 timeout.current.focusTimeout = setTimeout(function() { 2615 var selectionStart = el.selectionStart; 2616 var selectionEnd = el.selectionEnd; 2617 var value = el.value; 2618 if (value === void 0) value = ""; 2619 var caretPosition = correctCaretPosition(value, selectionStart); 2620 if (caretPosition !== selectionStart && !(selectionStart === 0 && selectionEnd === value.length)) setPatchedCaretPosition(el, caretPosition, value); 2621 onFocus(e); 2622 }, 0); 2623 }; 2624 var _onBlur = function(e) { 2625 focusedElm.current = null; 2626 clearTimeout(timeout.current.focusTimeout); 2627 clearTimeout(timeout.current.setCaretTimeout); 2628 onBlur(e); 2629 }; 2630 var inputMode = mounted && addInputMode() ? "numeric" : void 0; 2631 var inputProps = Object.assign({ inputMode }, otherProps, { 2632 type, 2633 value: formattedValue, 2634 onChange: _onChange, 2635 onKeyDown: _onKeyDown, 2636 onMouseUp: _onMouseUp, 2637 onFocus: _onFocus, 2638 onBlur: _onBlur 2639 }); 2640 if (displayType === "text") return renderText ? import_react.createElement(import_react.Fragment, null, renderText(formattedValue, otherProps) || null) : import_react.createElement("span", Object.assign({}, otherProps, { ref: getInputRef }), formattedValue); 2641 else if (customInput) { 2642 var CustomInput = customInput; 2643 return import_react.createElement(CustomInput, Object.assign({}, inputProps, { ref: getInputRef })); 2644 } 2645 return import_react.createElement("input", Object.assign({}, inputProps, { ref: getInputRef })); 2646} 2647function format(numStr, props) { 2648 var decimalScale = props.decimalScale; 2649 var fixedDecimalScale = props.fixedDecimalScale; 2650 var prefix = props.prefix; 2651 if (prefix === void 0) prefix = ""; 2652 var suffix = props.suffix; 2653 if (suffix === void 0) suffix = ""; 2654 var allowNegative = props.allowNegative; 2655 var thousandsGroupStyle = props.thousandsGroupStyle; 2656 if (thousandsGroupStyle === void 0) thousandsGroupStyle = "thous
2656and"; 2657 if (numStr === "" || numStr === "-") return numStr; 2658 var ref = getSeparators(props); 2659 var thousandSeparator = ref.thousandSeparator; 2660 var decimalSeparator = ref.decimalSeparator; 2661 /** 2662 * Keep the decimal separator 2663 * when decimalScale is not defined or non zero and the numStr has decimal in it 2664 * Or if decimalScale is > 0 and fixeDecimalScale is true (even if numStr has no decimal) 2665 */ 2666 var hasDecimalSeparator = decimalScale !== 0 && numStr.indexOf(".") !== -1 || decimalScale && fixedDecimalScale; 2667 var ref$1 = splitDecimal(numStr, allowNegative); 2668 var beforeDecimal = ref$1.beforeDecimal; 2669 var afterDecimal = ref$1.afterDecimal; 2670 var addNegation = ref$1.addNegation; 2671 if (decimalScale !== void 0) afterDecimal = limitToScale(afterDecimal, decimalScale, !!fixedDecimalScale); 2672 if (thousandSeparator) beforeDecimal = applyThousandSeparator(beforeDecimal, thousandSeparator, thousandsGroupStyle); 2673 if (prefix) beforeDecimal = prefix + beforeDecimal; 2674 if (suffix) afterDecimal = afterDecimal + suffix; 2675 if (addNegation) beforeDecimal = "-" + beforeDecimal; 2676 numStr = beforeDecimal + (hasDecimalSeparator && decimalSeparator || "") + afterDecimal; 2677 return numStr; 2678} 2679function getSeparators(props) { 2680 var decimalSeparator = props.decimalSeparator; 2681 if (decimalSeparator === void 0) decimalSeparator = "."; 2682 var thousandSeparator = props.thousandSeparator; 2683 var allowedDecimalSeparators = props.allowedDecimalSeparators; 2684 if (thousandSeparator === true) thousandSeparator = ","; 2685 if (!allowedDecimalSeparators) allowedDecimalSeparators = [decimalSeparator, "."]; 2686 return { 2687 decimalSeparator, 2688 thousandSeparator, 2689 allowedDecimalSeparators 2690 }; 2691} 2692function handleNegation(value, allowNegative) { 2693 if (value === void 0) value = ""; 2694 var negationRegex = /* @__PURE__ */ new RegExp("(-)"); 2695 var doubleNegationRegex = /* @__PURE__ */ new RegExp("(-)(.)*(-)"); 2696 var hasNegation = negationRegex.test(value); 2697 var removeNegation = doubleNegationRegex.test(value); 2698 value = value.replace(/-/g, ""); 2699 if (hasNegation && !removeNegation && allowNegative) value = "-" + value; 2700 return value; 2701} 2702function getNumberRegex(decimalSeparator, global) { 2703 return new RegExp("(^-)|[0-9]|" + escapeRegExp(decimalSeparator), global ? "g" : void 0); 2704} 2705function removeFormatting(value, changeMeta, props) { 2706 var assign; 2707 if (changeMeta === void 0) changeMeta = getDefaultChangeMeta(value); 2708 var allowNegative = props.allowNegative; 2709 var prefix = props.prefix; 2710 if (prefix === void 0) prefix = ""; 2711 var suffix = props.suffix; 2712 if (suffix === void 0) suffix = ""; 2713 var decimalScale = props.decimalScale; 2714 var from = changeMeta.from; 2715 var to = changeMeta.to; 2716 var start = to.start; 2717 var end = to.end; 2718 var ref = getSeparators(props); 2719 var allowedDecimalSeparators = ref.allowedDecimalSeparators; 2720 var decimalSeparator = ref.decimalSeparator; 2721 var isBeforeDecimalSeparator = value[end] === decimalSeparator; 2722 /** 2723 * If only a number is added on empty input which matches with the prefix or suffix, 2724 * then don't remove it, just return the same 2725 */ 2726 if (charIsNumber(value) && (value === prefix || value === suffix) && changeMeta.lastValue === "") return value; 2727 /** Check for any allowed decimal separator is added in the numeric format and replace it with decimal separator */ 2728 if (end - start === 1 && allowedDecimalSeparators.indexOf(value[start]) !== -1) { 2729 var separator = decimalScale === 0 ? "" : decimalSeparator; 2730 value = value.substring(0, start) + separator + value.substring(start + 1, value.length); 2731 } 2732 var stripNegation = function(value, start, end) { 2733 /** 2734 * if prefix starts with - we don't allow negative number to avoid confusion 2735 * if suffix starts with - and the value length is same as suffix length, then the - sign is from the suffix 2736 * In other cases, if the value starts with - then it is a negation 2737 */ 2738 var hasNegation = false; 2739 var hasDoubleNegation = false; 2740 if (prefix.startsWith("-")) hasNegation = false; 2741 else if (value.startsWith("--")) { 2742 hasNegation = false; 2743 hasDoubleNegation = true; 2744 } else if (suffix.startsWith("-") && value.length === suffix.length) hasNegation = false;
2745 else if (value[0] === "-") hasNegation = true; 2746 var charsToRemove = hasNegation ? 1 : 0; 2747 if (hasDoubleNegation) charsToRemove = 2; 2748 if (charsToRemove) { 2749 value = value.substring(charsToRemove); 2750 start -= charsToRemove; 2751 end -= charsToRemove; 2752 } 2753 return { 2754 value, 2755 start, 2756 end, 2757 hasNegation 2758 }; 2759 }; 2760 var toMetadata = stripNegation(value, start, end); 2761 var hasNegation = toMetadata.hasNegation; 2762 assign = toMetadata, value = assign.value, start = assign.start, end = assign.end; 2763 var ref$1 = stripNegation(changeMeta.lastValue, from.start, from.end); 2764 var fromStart = ref$1.start; 2765 var fromEnd = ref$1.end; 2766 var lastValue = ref$1.value; 2767 var updatedSuffixPart = value.substring(start, end); 2768 if (value.length && lastValue.length && (fromStart > lastValue.length - suffix.length || fromEnd < prefix.length) && !(updatedSuffixPart && suffix.startsWith(updatedSuffixPart))) value = lastValue; 2769 /** 2770 * remove prefix 2771 * Remove whole prefix part if its present on the value 2772 * If the prefix is partially deleted (in which case change start index will be less the prefix length) 2773 * Remove only partial part of prefix. 2774 */ 2775 var startIndex = 0; 2776 if (value.startsWith(prefix)) startIndex += prefix.length; 2777 else if (start < prefix.length) startIndex = start; 2778 value = value.substring(startIndex); 2779 end -= startIndex; 2780 /** 2781 * Remove suffix 2782 * Remove whole suffix part if its present on the value 2783 * If the suffix is partially deleted (in which case change end index will be greater than the suffixStartIndex) 2784 * remove the partial part of suffix 2785 */ 2786 var endIndex = value.length; 2787 var suffixStartIndex = value.length - suffix.length; 2788 if (value.endsWith(suffix)) endIndex = suffixStartIndex; 2789 else if (end > suffixStartIndex) endIndex = end; 2790 else if (end > value.length - suffix.length) endIndex = end; 2791 value = value.substring(0, endIndex); 2792 value = handleNegation(hasNegation ? "-" + value : value, allowNegative); 2793 value = (value.match(getNumberRegex(decimalSeparator, true)) || []).join(""); 2794 var firstIndex = value.indexOf(decimalSeparator); 2795 value = value.replace(new RegExp(escapeRegExp(decimalSeparator), "g"), function(match, index) { 2796 return index === firstIndex ? "." : ""; 2797 }); 2798 var ref$2 = splitDecimal(value, allowNegative); 2799 var beforeDecimal = ref$2.beforeDecimal; 2800 var afterDecimal = ref$2.afterDecimal; 2801 var addNegation = ref$2.addNegation; 2802 if (to.end - to.start < from.end - from.start && beforeDecimal === "" && isBeforeDecimalSeparator && !parseFloat(afterDecimal)) value = addNegation ? "-" : ""; 2803 return value; 2804} 2805function getCaretBoundary(formattedValue, props) { 2806 var prefix = props.prefix; 2807 if (prefix === void 0) prefix = ""; 2808 var suffix = props.suffix; 2809 if (suffix === void 0) suffix = ""; 2810 var boundaryAry = Array.from({ length: formattedValue.length + 1 }).map(function() { 2811 return true; 2812 }); 2813 var hasNegation = formattedValue[0] === "-"; 2814 boundaryAry.fill(false, 0, prefix.length + (hasNegation ? 1 : 0)); 2815 var valLn = formattedValue.length; 2816 boundaryAry.fill(false, valLn - suffix.length + 1, valLn + 1); 2817 return boundaryAry; 2818} 2819function validateAndUpdateProps(props) { 2820 var ref = getSeparators(props); 2821 var thousandSeparator = ref.thousandSeparator; 2822 var decimalSeparator = ref.decimalSeparator; 2823 var prefix = props.prefix; 2824 if (prefix === void 0) prefix = ""; 2825 var allowNegative = props.allowNegative; 2826 if (allowNegative === void 0) allowNegative = true; 2827 if (thousandSeparator === decimalSeparator) throw new Error("\n Decimal separator can't be same as thousand separator.\n thousandSeparator: " + thousandSeparator + " (thousandSeparator = {true} is same as thousandSeparator = \",\")\n decimalSeparator: " + decimalSeparator + " (default value for decimalSeparator is .)\n "); 2828 if (prefix.startsWith("-") && allowNegative) { 2829 console.error("\n Prefix can't start with '-' when allowNegative is true.\n prefix: " + prefix + "\n allowNegative: " + allowNegative + "\n "); 2830 allowNegative = false; 2831 } 2832 return Object.assign(Object.assign({}, props), { allowNegative }); 2833} 2834function useNumericFormat(props) { 2835 props = validateAndUpdateProps(props); 2836 var decimalSeparator = props.decimalSeparator; 2837 if (decimalSeparator === void 0) decimalSeparator = "."; 2838 props.allowedDecimalSeparators; 2839 props.thousandsGroupStyle; 2840 props.suffix; 2841 var allowNegative = props.allowNegative; 2842 var allowLeadingZeros = props.allowLeadingZeros; 2843 var onKeyDown = props.onKeyDown; 2844 if (onKeyDown === void 0) onKeyDown = noop; 2845 var onBlur = props.onBlur; 2846 if (onBlur === void 0) onBlur = noop; 2847 var thousandSeparator = props.thousandSeparator; 2848 var decimalScale = props.decimalScale; 2849 var fixedDecimalScale = props.fixedDecimalScale; 2850 var prefix = props.prefix; 2851 if (prefix === void 0) prefix = ""; 2852 var defaultValue = props.defaultValue; 2853 var value = props.value; 2854 var valueIsNumericString = props.valueIsNumericString; 2855 var onValueChange = props.onValueChange; 2856 var restProps = __rest(props, [ 2857 "decimalSeparator", 2858 "allowedDecimalSeparators", 2859 "thousandsGroupStyle", 2860 "suffix", 2861 "allowNegative", 2862 "allowLeadingZeros", 2863 "onKeyDown", 2864 "onBlur", 2865 "thousandSeparator", 2866 "decimalScale", 2867 "fixedDecimalScale", 2868 "prefix", 2869 "defaultValue", 2870 "value", 2871 "valueIsNumericString", 2872 "onValueChange" 2873 ]); 2874 var _format = function(numStr) { 2875 return format(numStr, props); 2876 }; 2877 var _removeFormatting = function(inputValue, changeMeta) { 2878 return removeFormatting(inputValue, changeMeta, props); 2879 }; 2880 var _valueIsNumericString = valueIsNumericString; 2881 if (!isNil(value)) _valueIsNumericString = valueIsNumericString !== null && valueIsNumericString !== void 0 ? valueIsNumericString : typeof value === "number"; 2882 else if (!isNil(defaultValue)) _valueIsNumericString = valueIsNumericString !== null && valueIsNumericString !== void 0 ? valueIsNumericString : typeof defaultValue === "number"; 2883 var roundIncomingValueToPrecision = function(value) { 2884 if (isNil(value) || isNanValue(value)) return value; 2885 if (typeof value === "number") value = toNumericString(value); 2886 /** 2887 * only round numeric or float string values coming through props, 2888 * we don't need to do it for onChange events, as we want to prevent typing there 2889 */ 2890 if (_valueIsNumericString && typeof decimalScale === "number") return roundToPrecision(value, decimalScale, Boolean(fi
2890xedDecimalScale)); 2891 return value; 2892 }; 2893 var ref = useInternalValues(roundIncomingValueToPrecision(value), roundIncomingValueToPrecision(defaultValue), Boolean(_valueIsNumericString), _format, _removeFormatting, onValueChange); 2894 var ref_0 = ref[0]; 2895 var numAsString = ref_0.numAsString; 2896 var formattedValue = ref_0.formattedValue; 2897 var _onValueChange = ref[1]; 2898 var _onKeyDown = function(e) { 2899 var el = e.target; 2900 var key = e.key; 2901 var selectionStart = el.selectionStart; 2902 var selectionEnd = el.selectionEnd; 2903 var value = el.value; 2904 if (value === void 0) value = ""; 2905 if (selectionStart !== selectionEnd) { 2906 onKeyDown(e); 2907 return; 2908 } 2909 if (key === "Backspace" && value[0] === "-" && selectionStart === prefix.length + 1 && allowNegative) setCaretPosition(el, 1); 2910 var ref = getSeparators(props); 2911 var decimalSeparator = ref.decimalSeparator; 2912 var allowedDecimalSeparators = ref.allowedDecimalSeparators; 2913 if (key === "Backspace" && value[selectionStart - 1] === decimalSeparator && decimalScale && fixedDecimalScale) { 2914 setCaretPosition(el, selectionStart - 1); 2915 e.preventDefault(); 2916 } 2917 if ((allowedDecimalSeparators === null || allowedDecimalSeparators === void 0 ? void 0 : allowedDecimalSeparators.includes(key)) && value[selectionStart] === decimalSeparator) setCaretPosition(el, selectionStart + 1); 2918 var _thousandSeparator = thousandSeparator === true ? "," : thousandSeparator; 2919 if (key === "Backspace" && value[selectionStart - 1] === _thousandSeparator) setCaretPosition(el, selectionStart - 1); 2920 if (key === "Delete" && value[selectionStart] === _thousandSeparator) setCaretPosition(el, selectionStart + 1); 2921 onKeyDown(e); 2922 }; 2923 var _onBlur = function(e) { 2924 var _value = numAsString; 2925 if (!_value.match(/\d/g)) _value = ""; 2926 if (!allowLeadingZeros) _value = fixLeadingZero(_value); 2927 if (fixedDecimalScale && decimalScale) _value = roundToPrecision(_value, decimalScale, fixedDecimalScale); 2928 if (_value !== numAsString) _onValueChange({ 2929 formattedValue: format(_value, props), 2930 value: _value, 2931 floatValue: parseFloat(_value) 2932 }, { 2933 event: e, 2934 source: SourceType.event 2935 }); 2936 onBlur(e); 2937 }; 2938 var isValidInputCharacter = function(inputChar) { 2939 if (inputChar === decimalSeparator) return true; 2940 return charIsNumber(inputChar); 2941 }; 2942 return Object.assign(Object.assign({}, restProps), { 2943 value: formattedValue, 2944 valueIsNumericString: false, 2945 isValidInputCharacter, 2946 onValueChange: _onValueChange, 2947 format: _format, 2948 removeFormatting: _removeFormatting, 2949 getCaretBoundary: function(formattedValue) { 2950 return getCaretBoundary(formattedValue, props); 2951 }, 2952 onKeyDown: _onKeyDown, 2953 onBlur: _onBlur 2954 }); 2955} 2956function NumericFormat(props) { 2957 var numericFormatProps = useNumericFormat(props); 2958 return import_react.createElement(NumberFormatBase, Object.assign({}, numericFormatProps)); 2959} 2960//#endregion 2961//#region client/components/editor/Components/TruffleEditingWorkSpace/Components/Libraries/Components/TruffleMediaLibrary/ActionBar/SortAndFilter/common.ts 2962var filterContentWrapperSxProps = { padding: "0 6px 8px 16px" }; 2963var popoverProps = { slotProps: { paper: { sx: { width: "216px" } } } }; 2964//#endregion 2965//#region client/components/editor/Components/TruffleEditingWorkSpace/Components/Libraries/Components/TruffleMediaLibrary/ActionBar/SortAndFilter/VideoDurationFilter.tsx 2966var MAX_DURATION_SUFFIX = "+"; 2967var DurationInput = (0, import_react.forwardRef)(function DurationInput({ onChange, ...rest }, ref) { 2968 return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(NumericFormat, { 2969 ...rest, 2970 getInputRef: ref, 2971 decimalScale: 0, 2972 min: 0, 2973 max: 600, 2974 suffix: rest.value == 600 ? MAX_DURATION_SUFFIX : "", 2975 allowNegative: false, 2976 onValueChange: (values) => { 2977 onChange({ target: { 2978 name: rest.name, 2979 value: values.floatValue 2980 } }); 2981 } 2982 }); 2983}); 2984var VideoDurationFilter = (props) => { 2985 const { filterMediaType, setFilterMediaType, filterMinVideoDuration: appliedMinVideoDuration, setFilterMinVideoDuration, filterMaxVideoDuration: appliedMaxVideoDuration, setFilterMaxVideoDuration } = (0, import_react.useContext)(TruffleMediaLibraryContext); 2986 const [minVideoDuration, setMinVideoDuration] = (0, import_react.useState)(appliedMinVideoDuration); 2987 const [maxVideoDuration, setMaxVideoDuration] = (0, import_react.useState)(appliedMaxVideoDuration); 2988 const [anchor, setAnchor] = (0, import_react.useState)(null); 2989 const minCharacters = appliedMinVideoDuration === 0 ? 600 .toString().length + 1 : (appliedMinVideoDuration || 0).toString().length; 2990 const maxCharacters = appliedMaxVideoDuration === 600 ? 600 .toString().length + 1 : (appliedMaxVideoDuration || 0).toString().length; 2991 const handleMinBlur = () => { 2992 if (minVideoDuration === void 0 || minVideoDuration < 0) { 2993 setMinVideoDuration(0); 2994 setFilterMinVideoDuration(0); 2995 return; 2996 } 2997 if (minVideoDuration > maxVideoDuration) { 2998 setMinVideoDuration(maxVideoDuration); 2999 setTimeout(() => setFilterMinVideoDuration(maxVideoDuration), 0); 3000 return; 3001 } 3002 if (minVideoDuration !== appliedMinVideoDuration) { 3003 setFilterMinVideoDuration(minVideoDuration); 3004 setFilterMediaType(MediaLibraryFilterMediaType.VIDEOS); 3005 } 3006 }; 3007 const handleMaxBlur = () => { 3008 if (maxVideoDuration === void 0 || maxVideoDuration > 600) { 3009 setMaxVideoDuration(600); 3010 setFilterMaxVideoDuration(600); 3011 return; 3012 } 3013 if (maxVideoDuration < minVideoDuration) { 3014 setMaxVideoDuration(minVideoDuration); 3015 setTimeout(() => setFilterMaxVideoDuration(minVideoDuration), 0); 3016 return; 3017 } 3018 if (maxVideoDuration !== appliedMaxVideoDuration) { 3019 setFilterMaxVideoDuration(maxVideoDuration); 3020 setFilterMediaType(MediaLibraryFilterMediaType.VIDEOS); 3021 } 3022 }; 3023 const handleMinKeyDown = (0, import_react.useCallback)((event) => { 3024 if (event.key === "Enter") handleMinBlur(); 3025 }, [handleMinBlur]); 3026 const handleMaxKeyDown = (0, import_react.useCallback)((event) => { 3027 if (event.key === "Enter") handleMaxBlur(); 3028 }, [handleMaxBlur]); 3029 const handleMinChange = (event) => { 3030 if (event.target.value !== null && event.target.value >= 0) setMinVideoDuration(event.target.value); 3031 }; 3032 const handleMaxChange = (event) => { 3033 if (event.target.value !== null && event.target.value >= 0) setMaxVideoDuration(event.target.value); 3034 }; 3035 const renderSelectedValue = () => { 3036 if (appliedMaxVideoDuration === 600 && appliedMinVideoDuration === 0) return "Duration"; 3037 if (appliedMinVideoDuration > 0 && appliedMaxVideoDuration === 600) return `From ${appliedMinVideoDuration} sec`; 3038 if (appliedMaxVideoDuration < 600 && appliedMinVideoDuration === 0) return `Up to ${appliedMaxVideoDuration} sec`; 3039 return `${appliedMinVideoDuration} - ${appliedMaxVideoDuration} sec`; 3040 }; 3041 const resetDuration = () => { 3042 setMinVideoDuration(0); 3043 setMaxVideoDuration(600); 3044 setFilterMinVideoDuration(0); 3045 setFilterMaxVideoDuration(600); 3046 }; 3047 const selected = appliedMinVideoDuration !== 0 || appliedMaxVideoDuration !== 600; 3048 return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Box, { 3049 sx: { order: props.order }, 3050 children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_dist$3.Filter, { 3051 placeholderValue: renderSelectedValue(), 3052 selectedValue: selected ? renderSelectedValue() : null, 3053 onClear: resetDuration, 3054 popoverTitle: "Video Duration", 3055 anchorEl: anchor, 3056 setAnchorEl: setAnchor, 3057 PopoverProps: popoverProps, 3058 children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(InputContainer, { 3059 sx: filterContentWrapperSxProps, 3060 children: [
3061 /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledInput, { 3062 value: minVideoDuration, 3063 inputComponent: DurationInput, 3064 inputProps: { style: { width: `${minCharacters}ch` } }, 3065 disabled: filterMediaType === MediaLibraryFilterMediaType.IMAGES, 3066 onChange: handleMinChange, 3067 onBlur: handleMinBlur, 3068 onKeyDown: handleMinKeyDown 3069 }), 3070 /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Typography, { children: "to" }), 3071 /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledInput, { 3072 value: maxVideoDuration, 3073 inputComponent: DurationInput, 3074 inputProps: { style: { width: `${maxCharacters}ch` } }, 3075 disabled: filterMediaType === MediaLibraryFilterMediaType.IMAGES, 3076 onChange: handleMaxChange, 3077 onBlur: handleMaxBlur, 3078 onKeyDown: handleMaxKeyDown 3079 }), 3080 /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Typography, { children: "seconds" }) 3081 ] 3082 }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Box, { 3083 sx: { 3084 display: "flex", 3085 justifyContent: "flex-end", 3086 marginTop: "16px", 3087 width: "100%" 3088 }, 3089 children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Button, { 3090 variant: "text", 3091 size: "medium", 3092 color: "primary", 3093 "data-tracking-id": "tracking-id-media-lib-filter-video-duration-clear", 3094 disabled: appliedMaxVideoDuration === 600 && appliedMinVideoDuration === 0, 3095 onClick: resetDuration, 3096 children: "Clear" 3097 }) 3098 })] 3099 }) 3100 }); 3101}; 3102var InputContainer = (0, import_material.styled)(import_material.Box)(({ theme }) => ({ 3103 display: "flex", 3104 flexDirection: "row", 3105 alignItems: "baseline", 3106 gap: "4px", 3107 fontSize: "14px", 3108 color: theme.palette.text.secondary 3109})); 3110var StyledInput = (0, import_material.styled)(import_material.OutlinedInput)({ 3111 minWidth: "49px",
3112 height: "20px", 3113 flexShrink: 1, 3114 "& .MuiInputBase-input": { padding: "4px 8px" } 3115}); 3116//#endregion 3117//#region client/components/editor/Components/TruffleEditingWorkSpace/Components/Libraries/Components/TruffleMediaLibrary/ActionBar/SortAndFilter/MediaFilter.tsx 3118var MediaFilter = (props) => { 3119 const [anchor, setAnchor] = (0, import_react.useState)(null); 3120 const valueSelected = props.value !== props.defaultValue; 3121 const onFilterChange = (value) => { 3122 props.onFilterValueChange(value); 3123 }; 3124 const onFilterCleared = () => { 3125 onFilterChange(props.defaultValue); 3126 props.onFilterClosed?.(); 3127 }; 3128 return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Box, { 3129 sx: { order: props.order }, 3130 children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dist$3.Filter, { 3131 placeholderValue: props.filterName, 3132 selectedValue: valueSelected ? props.values.find(({ value }) => value === props.value)?.label : null, 3133 onClear: onFilterCleared, 3134 popoverTitle: `Media ${props.filterName}`, 3135 anchorEl: anchor, 3136 setAnchorEl: setAnchor, 3137 PopoverProps: popoverProps, 3138 children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.RadioGroup, { 3139 sx: filterContentWrapperSxProps, 3140 value: props.value, 3141 onChange: (_, value) => onFilterChange(value), 3142 children: props.values.map((option, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react.Fragment, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.FormControlLabel, { 3143 "data-tracking-id": option.trackingId, 3144 control: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Radio, {}), 3145 label: option.label, 3146 value: option.value, 3147 checked: props.value === option.value 3148 }), index === 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Divider, {})] }, option.value)) 3149 }) 3150 }) 3151 }); 3152}; 3153//#endregion 3154//#region client/components/editor/Components/TruffleEditingWorkSpace/Components/Libraries/Components/TruffleMediaLibrary/ActionBar/SortAndFilter/FiltersSection.tsx 3155var MEDIA_TYPE_OPTIONS = [ 3156 { 3157 label: "All media types", 3158 value: MediaLibraryFilterMediaType.ALL, 3159 trackingId: "tracking-id-media-lib-type-filter-all" 3160 }, 3161 { 3162 label: "Images", 3163 value: MediaLibraryFilterMediaType.IMAGES, 3164 trackingId: "tracking-id-media-lib-type-filter-images" 3165 }, 3166 { 3167 label: "Videos", 3168 value: MediaLibraryFilterMediaType.VIDEOS, 3169 trackingId: "tracking-id-media-lib-type-filter-videos" 3170 } 3171]; 3172var MEDIA_SOURCE_OPTIONS = [ 3173 { 3174 label: "All", 3175 value: MediaLibraryFilterMediaSource.ALL, 3176 trackingId: "tracking-id-media-lib-filter-source-all" 3177 }, 3178 { 3179 label: "Uploaded", 3180 value: MediaLibraryFilterMediaSource.USER, 3181 trackingId: "tracking-id-media-lib-filter-source-upload" 3182 }, 3183 { 3184 label: "Getty", 3185 value: MediaLibraryFilterMediaSource.GETTY, 3186 trackingId: "tracking-id-media-lib-filter-source-getty" 3187 }, 3188 { 3189 label: "AI Generated", 3190 value: MediaLibraryFilterMediaSource.AI_IMAGE, 3191 trackingId: "tracking-id-media-lib-filter-source-ai-generated" 3192 } 3193]; 3194var MEDIA_ORIENTATION_OPTIONS = [ 3195 { 3196 label: "All media orientation", 3197 value: MediaLibraryFilterMediaOrientation.ALL, 3198 trackingId: "tracking-id-media-lib-filter-orientation-all" 3199 }, 3200 { 3201 label: "Horizontal", 3202 value: MediaLibraryFilterMediaOrientation.HORIZONTAL, 3203 trackingId: "tracking-id-media-lib-filter-orientation-horizontal" 3204 }, 3205 { 3206 label: "Vertical", 3207 value: MediaLibraryFilterMediaOrientation.VERTICAL, 3208 trackingId: "tracking-id-media-lib-filter-orientation-vertical" 3209 } 3210]; 3211var ACQUIA_MEDIA_ORIENTATION_OPTIONS = [ 3212 { 3213 label: "All media orientation", 3214 value: MediaLibraryFilterMediaOrientation.ALL, 3215 trackingId: "tracking-id-media-lib-filter-orientation-all" 3216 }, 3217 { 3218 label: "Horizontal", 3219 value: MediaLibraryFilterMediaOrientation.HORIZONTAL, 3220 trackingId: "tracking-id-media-lib-filter-orientation-horizontal" 3221 }, 3222 { 3223 label: "Vertical", 3224 value: MediaLibraryFilterMediaOrientation.VERTICAL, 3225 trackingId: "tracking-id-media-lib-filter-orientation-vertical" 3226 }, 3227 { 3228 label: "Square", 3229 value: MediaLibraryFilterMediaOrientation.SQUARE, 3230 trackingId: "tracking-id-media-lib-filter-orientation-square" 3231 } 3232]; 3233var AcquiaSourceOption = { 3234 label: "Acquia DAM", 3235 value: MediaLibraryFilterMediaSource.ACQUIA_DAM, 3236 trackingId: "tracking-id-media-lib-filter-source-acquia" 3237}; 3238var FiltersSection = ({ acquiaOptionInMediaSourceFilter, disabled, ...props }) => { 3239 const { filterMediaType, setFilterMediaType, filterMediaSource, setFilterMediaSource, filterStockOrientation, setFilterStockOrientation, filterMinVideoDuration, filterMaxVideoDuration, activeTab } = (0, import_react.useContext)(TruffleMediaLibraryContext); 3240 const scrollButtonLeftOffset = activeTab === MediaLibraryActiveTab.YourLibrary ? 48 : 32; 3241 const [selectionArr, setSelectionArr] = (0, import_react.useState)([ 3242 { 3243 name: "mediaType", 3244 selected: filterMediaType !== MediaLibraryFilterMediaType.ALL 3245 }, 3246 { 3247 name: "mediaSource", 3248 selected: filterMediaSource !== MediaLibraryFilterMediaSource.ALL 3249 }, 3250 { 3251 name: "stockOrientation", 3252 selected: filterStockOrientation !== MediaLibraryFilterMediaOrientation.ALL 3253 }, 3254 { 3255 name: "duration", 3256 selected: filterMaxVideoDuration !== 600 || filterMinVideoDuration !== 0 3257 } 3258 ]); 3259 const [shouldCalculateOrder, setShouldCalculateOrder] = (0, import_react.useState)(true); 3260 const getMediaSourceValues = () => { 3261 const mediaSourceFilter = MEDIA_SOURCE_OPTIONS; 3262 return !acquiaOptionInMediaSourceFilter ? mediaSourceFilter : [...mediaSourceFilter, AcquiaSourceOption]; 3263 }; 3264 const calculateOrder = () => { 3265 const updatedSelectionArr = [ 3266 { 3267 name: "mediaType", 3268 selected: filterMediaType !== MediaLibraryFilterMediaType.ALL 3269 }, 3270 { 3271 name: "mediaSource", 3272 selected: filterMediaSource !== MediaLibraryFilterMediaSource.ALL 3273 }, 3274 { 3275 name: "stockOrientation", 3276 selected: filterStockOrientation !== MediaLibraryFilterMediaOrientation.ALL 3277 }, 3278 { 3279 name: "duration", 3280 selected: filterMaxVideoDuration !== 600 || filterMinVideoDuration != 0 3281 } 3282 ]; 3283 updatedSelectionArr.sort((a, b) => { 3284 if (a.selected && !b.selected) return -1; 3285 if (!a.selected && b.selected) return 1; 3286 return 0; 3287 }); 3288 setShouldCalculateOrder(false); 3289 setSelectionArr(updatedSelectionArr); 3290 }; 3291 if (shouldCalculateOrder) calculateOrder(); 3292 return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_material.Box, { 3293 sx: { 3294 display: "flex", 3295 flexDirection: "row", 3296 alignItems: "center", 3297 gap: "8px" 3298 }, 3299 children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(SortButton, { 3300 activeTab, 3301 disabled 3302 }
3302), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Box, { 3303 sx: FiltersScrollableBoxSxProps, 3304 children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_material.Tabs, { 3305 sx: { 3306 minHeight: "unset", 3307 ".MuiTabs-flexContainer": { gap: "8px" } 3308 }, 3309 value: "ALL", 3310 variant: "scrollable", 3311 scrollButtons: "auto", 3312 slots: { scrollButtons: (props) => { 3313 if (props.direction === "left" || props.direction === "right") return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dist$3.TruffleIconButton, { 3314 sx: scrollButtonSxProps(!props.disabled, scrollButtonLeftOffset, props.direction === "left"), 3315 color: "white", 3316 variant: "contained", 3317 ...props, 3318 children: props.direction === "left" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ChevronLeft_default, {}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ChevronRight_default, {}) 3319 }); 3320 return null; 3321 } }, 3322 slotProps: { indicator: { style: { display: "none" } } }, 3323 children: [ 3324 !props.hideMediaTypeFilter ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MediaFilter, { 3325 disabled, 3326 order: selectionArr.findIndex((selection) => selection.name === "mediaType"), 3327 onFilterValueChange: setFilterMediaType, 3328 values: MEDIA_TYPE_OPTIONS, 3329 value: filterMediaType, 3330 defaultValue: MediaLibraryFilterMediaType.ALL, 3331 filterName: "Type", 3332 filterTrackingId: "tracking-id-media-lib-type-filter-btn", 3333 onFilterClosed: () => setShouldCalculateOrder(true) 3334 }) : null, 3335 activeTab === MediaLibraryActiveTab.YourLibrary && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MediaFilter, { 3336 disabled, 3337 order: selectionArr.findIndex((selection) => selection.name === "mediaSource"), 3338 onFilterValueChange: setFilterMediaSource, 3339 value: filterMediaSource, 3340 values: getMediaSourceValues(), 3341 defaultValue: MediaLibraryFilterMediaSource.ALL, 3342 filterName: "Source", 3343 filterTrackingId: "tracking-id-media-lib-filter-source-btn", 3344 onFilterClosed: () => setShouldCalculateOrder(true) 3345 }), 3346 (activeTab === MediaLibraryActiveTab.Stock || activeTab === MediaLibraryActiveTab.Dam) && /* @__P
3346URE__ */ (0, import_jsx_runtime.jsx)(MediaFilter, { 3347 disabled, 3348 order: selectionArr.findIndex((selection) => selection.name === "stockOrientation"), 3349 onFilterValueChange: setFilterStockOrientation, 3350 value: filterStockOrientation, 3351 values: activeTab === MediaLibraryActiveTab.Dam ? ACQUIA_MEDIA_ORIENTATION_OPTIONS : MEDIA_ORIENTATION_OPTIONS, 3352 defaultValue: MediaLibraryFilterMediaOrientation.ALL, 3353 filterName: "Orientation", 3354 filterTrackingId: "tracking-id-media-lib-filter-orientation-btn", 3355 onFilterClosed: () => setShouldCalculateOrder(true) 3356 }), 3357 props.mediaLibraryFilterMediaType !== MediaLibraryFilterMediaType.IMAGES && props.mediaLibraryFilterMediaType !== MediaLibraryFilterMediaType.IMAGES_AND_ANIMATIONS && activeTab !== MediaLibraryActiveTab.Dam ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(VideoDurationFilter, { 3358 order: selectionArr.findIndex((selection) => selection.name === "duration"), 3359 onFilterClosed: () => setShouldCalculateOrder(true) 3360 }) : null 3361 ] 3362 }) 3363 })] 3364 }); 3365}; 3366var FiltersScrollableBoxSxProps = { 3367 display: "flex", 3368 flexDirection: "row", 3369 alignItems: "center", 3370 width: "100%", 3371 paddingRight: "16px", 3372 overflowX: "auto" 3373}; 3374var scrollButtonSxProps = (visible, leftOffset, left) => ({ 3375 visibility: visible ? "visible" : "hidden", 3376 left: left ? leftOffset : "none", 3377 right: left ? "none" : "12px", 3378 position: "absolute", 3379 zIndex: 1, 3380 opacity: "0", 3381 "div:hover>&": { opacity: "1" } 3382}); 3383//#endregion 3384//#region node_modules/@fortawesome/pro-regular-svg-icons/faGrid.js 3385var require_faGrid = /* @__PURE__ */ __commonJSMin(((exports) => { 3386 Object.defineProperty(exports, "__esModule", { value: true }); 3387 var prefix = "far"; 3388 var iconName = "grid"; 3389 var width = 512; 3390 var height = 512; 3391 var aliases = ["grid-3"]; 3392 var unicode = "e195"; 3393 var svgPathData = "M112 64l0 48-48 0 0-48 48 0zM64 24C41.9 24 24 41.9 24 64l0 48c0 22.1 17.9 40 40 40l48 0c22.1 0 40-17.9 40-40l0-48c0-22.1-17.9-40-40-40L64 24zm48 208l0 48-48 0 0-48 48 0zM64 192c-22.1 0-40 17.9-40 40l0 48c0 22.1 17.9 40 40 40l48 0c22.1 0 40-17.9 40-40l0-48c0-22.1-17.9-40-40-40l-48 0zm0 208l48 0 0 48-48 0 0-48zm-40 0l0 48c0 22.1 17.9 40 40 40l48 0c22.1 0 40-17.9 40-40l0-48c0-22.1-17.9-40-40-40l-48 0c-22.1 0-40 17.9-40 40zM280 64l0 48-48 0 0-48 48 0zM232 24c-22.1 0-40 17.9-40 40l0 48c0 22.1 17.9 40 40 40l48 0c22.1 0 40-17.9 40-40l0-48c0-22.1-17.9-40-40-40l-48 0zm0 208l48 0 0 48-48 0 0-48zm-40 0l0 48c0 22.1 17.9 40 40 40l48 0c22.1 0 40-17.9 40-40l0-48c0-22.1-17.9-40-40-40l-48 0c-22.1 0-40 17.9-40 40zm88 168l0 48-48 0 0-48 48 0zm-48-40c-22.1 0-40 17.9-40 40l0 48c0 22.1 17.9 40 40 40l48 0c22.1 0 40-17.9 40-40l0-48c0-22.1-17.9-40-40-40l-48 0zM400 64l48 0 0 48-48 0 0-48zm-40 0l0 48c0 22.1 17.9 40 40 40l48 0c22.1 0 40-17.9 40-40l0-48c0-22.1-17.9-40-40-40l-48 0c-22.1 0-40 17.9-40 40zm88 168l0 48-48 0 0-48 48 0zm-48-40c-22.1 0-40 17.9-40 40l0 48c0 22.1 17.9 40 40 40l48 0c22.1 0 40-17.9 40-40l0-48c0-22.1-17.9-40-40-40l-48 0zm0 208l48 0 0 48-48 0 0-48zm-40 0l0 48c0 22.1 17.9 40 40 40l48 0c22.1 0 40-17.9 40-40l0-48c0-22.1-17.9-40-40-40l-48 0c-22.1 0-40 17.9-40 40z"; 3394 exports.definition = { 3395 prefix, 3396 iconName, 3397 icon: [ 3398 width, 3399 height, 3400 aliases, 3401 unicode, 3402 svgPathData 3403 ] 3404 }; 3405 exports.faGrid = exports.definition; 3406 exports.prefix = prefix; 3407 exports.iconName = iconName; 3408 exports.width = width; 3409 exports.height = height; 3410 exports.ligatures = aliases; 3411 exports.unicode = unicode; 3412 exports.svgPathData = svgPathData; 3413 exports.aliases = aliases; 3414})); 3415//#endregion 3416//#region node_modules/@fortawesome/pro-regular-svg-icons/faList.js 3417var require_faList = /* @__PURE__ */ __commonJSMin(((exports) => { 3418 Object.defineProperty(exports, "__esModule", { value: true }); 3419 var prefix = "far"; 3420 var iconName = "list"; 3421 var width = 512; 3422 var height = 512; 3423 var aliases = ["list-squares"]; 3424 var unicode = "f03a"; 3425 var svgPathData = "M40 48C26.7 48 16 58.7 16 72l0 48c0 13.3 10.7 24 24 24l48 0c13.3 0 24-10.7 24-24l0-48c0-13.3-10.7-24-24-24L40 48zM184 72c-13.3 0-24 10.7-24 24s10.7 24 24 24l304 0c13.3 0 24-10.7 24-24s-10.7-24-24-24L184 72zm0 160c-13.3 0-24 10.7-24 24s10.7 24 24 24l304 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-304 0zm0 160c-13.3 0-24 10.7-24 24s10.7 24 24 24l304 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-304 0zM16 232l0 48c0 13.3 10.7 24 24 24l48 0c13.3 0 24-10.7 24-24l0-48c0-13.3-10.7-24-24-24l-48 0c-13.3 0-24 10.7-24 24zM40 368c-13.3 0-24 10.7-24 24l0 48c0 13.3 10.7 24 24 24l48 0c13.3 0 24-10.7 24-24l0-48c0-13.3-10.7-24-24-24l-48 0z";
3426 exports.definition = { 3427 prefix, 3428 iconName, 3429 icon: [ 3430 width, 3431 height, 3432 aliases, 3433 unicode, 3434 svgPathData 3435 ] 3436 }; 3437 exports.faList = exports.definition; 3438 exports.prefix = prefix; 3439 exports.iconName = iconName; 3440 exports.width = width; 3441 exports.height = height; 3442 exports.ligatures = aliases; 3443 exports.unicode = unicode; 3444 exports.svgPathData = svgPathData; 3445 exports.aliases = aliases; 3446})); 3447//#endregion 3448//#region client/images/svgAsComponents/multi-select.svg 3449var import_faGrid = require_faGrid(); 3450var import_faList = require_faList(); 3451var SvgMultiSelect = (props) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { 3452 xmlns: "http://www.w3.org/2000/svg", 3453 width: 16, 3454 height: 16, 3455 fill: "none", 3456 ...props, 3457 children: [ 3458 /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { 3459 fill: "currentColor", 3460 d: "M13.5 0h-8C4.4 0 3.6.9 3.6 1.9V4h1.5V1.9c0-.3.2-.5.5-.5h8c.3 0 .5.2.5.5v8c0 .3-.2.5-.5.5h-1.7v1.5h1.7c1.1 0 1.9-.9 1.9-1.9V2c0-1.1-.9-1.9-1.9-1.9z" 3461 }), 3462 /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { 3463 fill: "currentColor", 3464 d: "M11.8 6c0-1.1-.9-1.9-1.9-1.9h-8C.8 4.1 0 5 0 6v8c0 1.1.9 1.9 1.9 1.9h8c1.1 0 1.9-.9 1.9-1.9zm-1.5 8c0 .3-.2.5-.5.5H1.9c-.3 0-.5-.2-.5-.5V6c0-.3.2-.5.5-.5h8c.3 0 .5.2.5.5v8z" 3465 }), 3466 /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { 3467 fill: "currentColor", 3468 d: "M5.1 12.3c-.2 0-.4 0-.5-.2L3 10.4c-.3-.3-.3-.7 0-1s.7-.3 1 0l1.1 1.2L7.8 8c.3-.3.7-.3 1 0s.3.7 0 1l-3.2 3.2c-.1.1-.3.2-.5.2z" 3469 }) 3470 ] 3471}); 3472//#endregion 3473//#region client/components/editor/Components/TruffleEditingWorkSpace/Components/Libraries/Components/TruffleMediaLibrary/ActionBar/YourLibraryActionBar.tsx 3474var YourLibraryActionBar = (props) => { 3475 return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Container$3, { 3476 "data-testid": "truffle-media-library-action-bar", 3477 children: [ 3478 /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Tooltip, { 3479 title: "New folder", 3480 children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dist$3.TruffleIconButton, { 3481 variant: "outlined", 3482 size: "medium", 3483 color: "primary", 3484 "data-tracking-id": `${trackingIdPrefix$1}-new-folder-button`, 3485 onClick: props.onNewFolderClick, 3486 children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FontAwesomeIcon, { icon: import_faFolderPlus.faFolderPlus }) 3487 }) 3488 }), 3489 /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Button, { 3490 variant: "outlined", 3491 size: "medium", 3492 startIcon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SvgMultiSelect, {}), 3493 "data-tracking-id": `${trackingIdPrefix$1}-multi-select`, 3494 onClick: props.onSelectClick, 3495 children: "Select" 3496 }), 3497 /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_dist$3.TruffleToggleButtonGroup, { 3498 variant: "outlined", 3499 color: "primary", 3500 size: "medium", 3501 fullWidth: false, 3502 exclusive: true, 3503 value: props.activeView, 3504 sx: { marginInlineStart: "auto" }, 3505 onChange: (_, value) => props.onViewChange(value), 3506 children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Tooltip, { 3507 title: "Grid view", 3508 children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.ToggleButton, { 3509 value: GqlClientLibraryViewType.GRID, 3510 "data-tracking-id": `${trackingIdPrefix$1}-grid-view-btn`, 3511 children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FontAwesomeIcon, { icon: import_faGrid.faGrid }) 3512 }) 3513 }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Tooltip, { 3514 title: "List view", 3515 children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.ToggleButton, { 3516 value: GqlClientLibraryViewType.LIST, 3517 "data-tracking-id": `${trackingIdPrefix$1}-list-view-btn`, 3518 children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FontAwesomeIcon, { icon: import_faList.faList }) 3519 }) 3520 })] 3521 }) 3522 ] 3523 }); 3524}; 3525var trackingIdPrefix$1 = "tracking-id-media-lib"; 3526var Container$3 = (0, import_material.styled)(import_material.Box)({ 3527 display: "flex", 3528 flexDirection: "row", 3529 gap: "4px", 3530 alignItems: "center", 3531 marginInlineEnd: "16px" 3532}); 3533//#endregion 3534//#region node_modules/@fortawesome/pro-regular-svg-icons/faFolderArrowUp.js 3535var require_faFolderArrowUp = /* @__PURE__ */ __commonJSMin(((exports) => { 3536 Object.defineProperty(exports, "__esModule", { value: true }); 3537 var prefix = "far"; 3538 var iconName = "folder-arrow-up"; 3539 var width = 512; 3540 var height = 512; 3541 var aliases = ["folder-upload"]; 3542 var unicode = "e054"; 3543 var svgPathData = "M464 384c0 8.8-7.2 16-16 16L64 400c-8.8 0-16-7.2-16-16L48 96c0-8.8 7.2-16 16-16l138.7 0c3.5 0 6.8 1.1 9.6 3.2L250.7 112c13.8 10.4 30.7 16 48 16L448 128c8.8 0 16 7.2 16 16l0 240zM64 448l384 0c35.3 0 64-28.7 64-64l0-240c0-35.3-28.7-64-64-64L298.7 80c-6.9 0-13.7-2.2-19.2-6.4L241.1 44.8C230 36.5 216.5 32 202.7 32L64 32C28.7 32 0 60.7 0 96L0 384c0 35.3 28.7 64 64 64zM273 175c-9.4-9.4-24.6-9.4-33.9 0l-64 64c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l23-23 0 86.1c0 13.3 10.7 24 24 24s24-10.7 24-24l0-86.1 23 23c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-64-64z"; 3544 exports.definition = { 3545 prefix, 3546 iconName, 3547 icon: [ 3548 width, 3549 height, 3550 aliases, 3551 unicode, 3552 svgPathData 3553 ] 3554 }; 3555 exports.faFolderArrowUp = exports.definition; 3556 exports.prefix = prefix; 3557 exports.iconName = iconName; 3558 exports.width = width; 3559 exports.height = height; 3560 exports.ligatures = aliases; 3561 exports.unicode = unicode;
3562 exports.svgPathData = svgPathData; 3563 exports.aliases = aliases; 3564})); 3565//#endregion 3566//#region client/components/editor/Components/TruffleEditingWorkSpace/Components/Libraries/Components/TruffleMediaLibrary/ActionBar/YourLibraryMultiSelectActionBar.tsx 3567var import_faFolderArrowUp = require_faFolderArrowUp(); 3568var YourLibraryMultiSelectActionBar = ({ selectedCount, onCancel, onMove, onDelete }) => { 3569 return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Container$2, { children: [ 3570 /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Button, { 3571 variant: "contained", 3572 size: "medium", 3573 color: "primary", 3574 "data-tracking-id": `${trackingIdPrefix}-multi-select-cancel`, 3575 onClick: onCancel, 3576 children: "Cancel" 3577 }), 3578 /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_material.Typography, { 3579 variant: "subtitle2", 3580 sx: { 3581 flexGrow: 1, 3582 textAlign: "center" 3583 }, 3584 children: [ 3585 "Selected items (", 3586 selectedCount, 3587 ")" 3588 ] 3589 }), 3590 /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Tooltip, { 3591 title: "Move to folder", 3592 children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dist$3.TruffleIconButton, { 3593 variant: "contained", 3594 size: "medium", 3595 color: "primary", 3596 disabled: selectedCount === 0, 3597 onClick: onMove, 3598 "data-tracking-id": `${trackingIdPrefix}-multi-select-move`, 3599 children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FontAwesomeIcon, { icon: import_faFolderArrowUp.faFolderArrowUp }) 3600 }) }) 3601 }), 3602 /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Tooltip, { 3603 title: "Delete", 3604 children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dist$3.TruffleIconButton, { 3605 variant: "contained", 3606 size: "medium", 3607 color: "error", 3608 disabled: selectedCount === 0, 3609 onClick: onDelete, 3610 "data-tracking-id": `${trackingIdPrefix}-multi-select-delete`, 3611 children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FontAwesomeIcon, { icon: import_faTrashAlt.faTrashAlt }) 3612 }) }) 3613 }) 3614 ] }); 3615}; 3616var trackingIdPrefix = "tracking-id-media-lib"; 3617var Container$2 = (0, import_material.styled)(import_material.Box)({ 3618 display: "flex", 3619 flexDirection: "row", 3620 gap: "4px", 3621 alignItems: "center", 3622 marginInlineEnd: "16px" 3623}); 3624//#endregion 3625//#region node_modules/@fortawesome/pro-regular-svg-icons/faCloudPlus.js 3626var require_faCloudPlus = /* @__PURE__ */ __commonJSMin(((exports) => { 3627 Object.defineProperty(exports, "__esModule", { value: true }); 3628 var prefix = "far"; 3629 var iconName = "cloud-plus"; 3630 var width = 576; 3631 var height = 512; 3632 var aliases = []; 3633 var unicode = "e35e"; 3634 var svgPathData = "M240 32c-88.4 0-160 71.6-160 160 0 4.9 .2 9.8 .7 14.6-47.8 23.4-80.7 72.5-80.7 129.4 0 79.5 64.5 144 144 144l304 0c70.7 0 128-57.3 128-128 0-49.9-28.5-93-70.1-114.2 4-11.9 6.1-24.6 6.1-37.8 0-66.3-53.7-120-120-120-11.5 0-22.7 1.6-33.3 4.7-29.3-32.3-71.6-52.7-118.7-52.7zM128 192c0-61.9 50.1-112 112-112 37.7 0 71 18.6 91.3 47.1 6.7 9.5 19.3 12.8 29.8 7.8 9.3-4.4 19.7-6.9 30.8-6.9 39.8 0 72 32.2 72 72 0 14.1-4 27.2-11 38.3-4.1 6.5-4.8 14.6-2 21.7s9 12.5 16.5 14.3c34.8 8.7 60.5 40.2 60.5 77.6 0 44.2-35.8 80-80 80l-304 0c-53 0-96-43-96-96 0-42.7 27.9-79 66.6-91.4 11.8-3.8 18.8-16 16.1-28.1-1.8-7.9-2.7-16.1-2.7-24.5zm160 0c-13.3 0-24 10.7-24 24l0 48-48 0c-13.3 0-24 10.7-24 24s10.7 24 24 24l48 0 0 48c0 13.3 10.7 24 24 24s24-10.7 24-24l0-48 48 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-48 0 0-48c0-13.3-10.7-24-24-24z"; 3635 exports.definition = { 3636 prefix, 3637 iconName, 3638 icon: [ 3639 width, 3640 height, 3641 aliases, 3642 unicode, 3643 svgPathData 3644 ] 3645 }; 3646 exports.faCloudPlus = exports.definition; 3647 exports.prefix = prefix; 3648 exports.iconName = iconName; 3649 exports.width = width; 3650 exports.height = height; 3651 exports.ligatures = aliases; 3652 exports.unicode = unicode; 3653 exports.svgPathData = svgPathData; 3654 exports.aliases = aliases; 3655})); 3656//#endregion 3657//#region node_modules/@fortawesome/pro-regular-svg-icons/faFolderClosed.js 3658var require_faFolderClosed = /* @__PURE__ */ __commonJSMin(((exports) => { 3659 Object.defineProperty(exports, "__esModule", { value: true }); 3660 var prefix = "far"; 3661 var iconName = "folder-closed"; 3662 var width = 512; 3663 var height = 512; 3664 var aliases = []; 3665 var unicode = "e185"; 3666 var svgPathData = "M448 400L64 400c-8.8 0-16-7.2-16-16l0-144 416 0 0 144c0 8.8-7.2 16-16 16zm16-208l-416 0 0-96c0-8.8 7.2-16 16-16l138.7 0c3.5 0 6.8 1.1 9.6 3.2L250.7 112c13.8 10.4 30.7 16 48 16L448 128c8.8 0 16 7.2 16 16l0 48zM64 448l384 0c35.3 0 64-28.7 64-64l0-240c0-35.3-28.7-64-64-64L298.7 80c-6.9 0-13.7-2.2-19.2-6.4L241.1 44.8C230 36.5 216.5 32 202.7 32L64 32C28.7 32 0 60.7 0 96L0 384c0 35.3 28.7 64 64 64z"; 3667 exports.definition = { 3668 prefix, 3669 iconName, 3670 icon: [ 3671 width, 3672 height, 3673 aliases, 3674 unicode, 3675 svgPathData 3676 ] 3677 }; 3678 exports.faFolderClosed = exports.definition; 3679 exports.prefix = prefix; 3680 exports.iconName = iconName; 3681 exports.width = width; 3682 exports.height = height; 3683 exports.ligatures = aliases; 3684 exports.unicode = unicode;
3685 exports.svgPathData = svgPathData; 3686 exports.aliases = aliases; 3687})); 3688//#endregion 3689//#region client/components/editor/Hooks/UseEditorProgramVersionId/useEditorProgramVersionId.ts 3690var import_faCloudPlus = require_faCloudPlus(); 3691var import_faFolderClosed = require_faFolderClosed(); 3692var EditorProgramVersionIdContext = (0, import_react.createContext)(null); 3693function useEditorProgramVersionId() { 3694 return (0, import_react.useContext)(EditorProgramVersionIdContext); 3695} 3696//#endregion 3697//#region client/components/editor/Components/TruffleEditingWorkSpace/Components/Libraries/Components/TruffleMediaLibrary/common.ts 3698var ItemType = /* @__PURE__ */ function(ItemType) { 3699 ItemType["YOUR_LIBRARY"] = "YOUR_LIBRARY"; 3700 ItemType["STOCK"] = "STOCK"; 3701 ItemType["AI_IMAGE"] = "AI_IMAGE"; 3702 ItemType["AI_VIDEO"] = "AI_VIDEO"; 3703 ItemType["FOLDER"] = "FOLDER"; 3704 ItemType["UPLOAD_TILE"] = "UPLOAD_TILE"; 3705 ItemType["DAM_ASSET"] = "DAM_ASSET"; 3706 ItemType["DAM_FOLDER"] = "DAM_FOLDER"; 3707 return ItemType; 3708}({}); 3709var ASSET_NAME_ALREADY_EXISTS = "This asset name already exists"; 3710var ASSET_NAME_CANNOT_BE_EMPTY = "Media name cannot be empty"; 3711var newFolderButtonSxProps = { 3712 width: "32px", 3713 height: "32px", 3714 "& svg": { 3715 width: "16px", 3716 height: "16px" 3717 }, 3718 "&:not([disabled]):not(:hover)": { color: "action.active" } 3719}; 3720var Thumbnail = (0, import_material.styled)(import_material.Box)(({ theme }) => ({ 3721 flexGrow: 1, 3722 display: "flex", 3723 alignItems: "center", 3724 backgroundColor: theme.palette.grey[50], 3725 width: "100%", 3726 justifyContent: "center", 3727 "[aria-grabbed=false] [data-drag-pending=true] &": { 3728 backgroundColor: theme.palette.divider, 3729 color: theme.palette.primary.light 3730 }, 3731 "[aria-grabbed=false] [data-drag-active=true] &": { 3732 backgroundColor: theme.palette.divider, 3733 color: theme.palette.primary.main 3734 }, 3735 "[aria-grabbed=false] [data-drag-active=true][aria-invalid=true] &": { 3736 backgroundColor: (0, import_material.alpha)(theme.palette.error.main, theme.palette.action.focusOpacity), 3737 color: theme.palette.error.main 3738 } 3739})); 3740var validateEditedFolderName = (newValue, siblingFoldersNames) => { 3741 if (newValue.trim() === "") return "Folder name cannot be empty"; 3742 else if (siblingFoldersNames.some((folderName) => folderName.toLowerCase() === newValue.trim().toLowerCase())) return "This name is being used by another folder"; 3743 else return null; 3744}; 3745var PreviewAssetDialogPaperProps = { 3746 margin: "32px", 3747 width: "calc(100% - 64px)", 3748 height: "calc(100% - 64px)", 3749 "& .MuiDialogTitle-root": { 3750 whiteSpace: "nowrap", 3751 overflow: "hidden", 3752 textOverflow: "ellipsis", 3753 paddingRight: "62px" 3754 } 3755}; 3756//#endregion 3757//#region client/components/common/ItemDetailsPopover.tsx 3758var ItemDetailsPopover = (props) => { 3759 const { detailsInfo, title, titleVariant, ...popoverProps } = props; 3760 return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_dist$3.TrufflePopover, { 3761 anchorOrigin: { 3762 vertical: "center", 3763 horizontal: "center" 3764 }, 3765 transformOrigin: { 3766 vertical: "center", 3767 horizontal: "left" 3768 }, 3769 slotProps: { paper: { sx: { width: "420px" } } }, 3770 ...popoverProps, 3771 children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dist$3.TruffleModalTitle, { 3772 CloseIconButtonProps: { onClick: (e) => popoverProps.onClose(e, "escapeKeyDown") },
3773 children: titleVariant ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Typography, { 3774 variant: titleVariant, 3775 color: "text.primary", 3776 children: title 3777 }) : title 3778 }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Box, { 3779 sx: { 3780 display: "flex", 3781 flexDirection: "column", 3782 gap: "14px" 3783 }, 3784 children: detailsInfo.map((detailInfo, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_material.Box, { 3785 sx: { 3786 display: "flex", 3787 flexDirection: "column", 3788 gap: "4px" 3789 }, 3790 children: [detailInfo.label ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_material.Box, { 3791 sx: { 3792 display: "flex", 3793 flexDirection: "row", 3794 gap: "8px", 3795 alignItems: "center" 3796 }, 3797 children: [typeof detailInfo.label !== "string" && detailInfo.label.icon ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.SvgIcon, { 3798 sx: { 3799 fontSize: "14px", 3800 width: "14px", 3801 height: "14px" 3802 }, 3803 color: "action", 3804 children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FontAwesomeIcon, { icon: detailInfo.label.icon }) 3805 }) : null, /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Typography, { 3806 variant: "caption", 3807 color: "text.primary", 3808 children: typeof detailInfo.label === "string" ? detailInfo.label : detailInfo.label.text 3809 })] 3810 }) : null, detailInfo.value] 3811 }, `detail-item-${index}`)) 3812 })] 3813 }); 3814}; 3815//#endregion 3816//#region client/components/editor/Components/TruffleEditingWorkSpace/Components/Libraries/Components/TruffleMediaLibrary/AssetGrid/AssetDetailsPopover.tsx 3817var FILE_SIZE_UNITS = [ 3818 ["GB", 1024 * 1024 * 1024], 3819 ["MB", 1024 * 1024], 3820 ["KB", 1024] 3821]; 3822function formatFileSize(size) { 3823 for (const [unit, multiplier] of FILE_SIZE_UNITS) { 3824 const converted = size / multiplier; 3825 if (converted > 1) return `${Math.round(converted)} ${unit}`; 3826 } 3827 return `${size} B`; 3828} 3829function formatFileFormat(format) { 3830 if (format?.trim().length) { 3831 if (format.toLowerCase() === "webm") return "WebM"; 3832 if (format.toLowerCase() === "mpeg4") return "MP4"; 3833 return format.toUpperCase(); 3834 } 3835 return ""; 3836} 3837var MEDIA_TYPE_LABELS = { 3838 [EditorLibraryMediaType.Image]: "Image", 3839 [EditorLibraryMediaType.Video]: "Video" 3840}; 3841var isRecorderAsset = (asset) => { 3842 return asset.type === ItemType.YOUR_LIBRARY && asset.origin === GqlClientMediaOrigin.RECORDER; 3843}; 3844var isUserAsset = (asset) => { 3845 return asset.type === ItemType.YOUR_LIBRARY && asset.origin === GqlClientMediaOrigin.USER; 3846}; 3847var isGettyAsset = (asset) => { 3848 return asset.type === ItemType.STOCK || asset.type === ItemType.YOUR_LIBRARY && asset.origin === GqlClientMediaOrigin.EXTERNAL && asset.externalLibrary === GqlClientExternalLibrary.GETTY; 3849}; 3850var isAiAsset = (asset) => { 3851 return asset.type === ItemType.AI_IMAGE || asset.type === ItemType.YOUR_LIBRARY && asset.origin === GqlClientMediaOrigin.AI_GENERATED; 3852}; 3853var isAcquiaAsset = (asset) => { 3854 return asset.type === ItemType.DAM_ASSET && asset.externalLibrary === GqlClientExternalLibrary.ACQUIA || asset.type === ItemType.YOUR_LIBRARY && asset.origin === GqlClientMediaOrigin.EXTERNAL && asset.externalLibrary === GqlClientExternalLibrary.ACQUIA; 3855}; 3856var getMediaOriginLabel = (asset) => { 3857 if (isUserAsset(asset)) return "User Upload"; 3858 if (isGettyAsset(asset)) return "Getty Images"; 3859 if (isAiAsset(asset)) return "Generated by AI"; 3860 if (isAcquiaAsset(asset)) return "Imported from Acquia DAM"; 3861 if (isRecorderAsset(asset)) return "Sundaysky Recorder"; 3862}; 3863var AssetDetailsPopover = (props) => { 3864 const assetNameProp = props.asset.type === ItemType.STOCK ? props.asset.id : props.asset.name; 3865 const canEditName = props.asset.type === ItemType.YOUR_LIBRARY && !isGettyAsset(props.asset); 3866 const [name, setName] = (0, import_react.useState)(assetNameProp); 3867 const [nameError, setNameError] = (0, import_react.useState)(null); 3868 const assetDescriptionProp = props.asset.type === ItemType.YOUR_LIBRARY ? props.asset.description : props.asset.name; 3869 const canEditDescription = props.asset.type !== ItemType.STOCK; 3870 const [description, setDescription] = (0, import_react.useState)(assetDescriptionProp); 3871 const [descriptionError, setDescriptionError] = (0, import_react.useState)(null); 3872 (0, import_react.useEffect)(() => {
3873 setName(assetNameProp); 3874 setNameError(null); 3875 }, [assetNameProp]); 3876 (0, import_react.useEffect)(() => { 3877 setDescription(assetDescriptionProp); 3878 setDescriptionError(null); 3879 }, [assetDescriptionProp]); 3880 const onNameChange = (e) => { 3881 setNameError(null); 3882 const newName = e.target.value; 3883 setName(newName); 3884 const validationResult = props.validateAssetName(newName); 3885 if (validationResult) setNameError(validationResult); 3886 }; 3887 const onNameBlur = () => { 3888 if (nameError) { 3889 setName(assetNameProp); 3890 setNameError(null); 3891 } else if (name !== assetNameProp) props.onRenameAsset(name); 3892 }; 3893 const onDescriptionChange = (e) => { 3894 setDescriptionError(null); 3895 const newDescription = e.target.value; 3896 setDescription(newDescription); 3897 if (newDescription.trim() === "") setDescriptionError("Media description cannot be empty"); 3898 }; 3899 const onDescriptionBlur = async () => { 3900 if (descriptionError) { 3901 setDescription(assetDescriptionProp); 3902 setDescriptionError(null); 3903 } else if (description !== assetDescriptionProp) await updateEditorAssetMedia(props.asset.id, void 0, description); 3904 }; 3905 const detailsInfo = []; 3906 detailsInfo.push({ 3907 label: !canEditName ? "Media name" : void 0, 3908 value: !canEditName ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dist$3.TypographyWithTooltipOnOverflow, { children: name }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.TextField, { 3909 label: "Media name", 3910 value: name, 3911 error: !!nameError, 3912 helperText: nameError, 3913 onChange: onNameChange, 3914 onBlur: onNameBlur, 3915 multiline: true 3916 }) 3917 }); 3918 if (props.asset.type === ItemType.YOUR_LIBRARY) detailsInfo.push({ 3919 label: { 3920 text: "Location", 3921 icon: import_faFolderClosed.faFolderClosed 3922 }, 3923 value: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_dist$3.TypographyWithTooltipOnOverflow, { 3924 sx: pathSxProps, 3925 children: [ 3926 props.assetPathFromRoot, 3927 " / ", 3928 assetNameProp 3929 ] 3930 }) 3931 }); 3932 if (props.asset.type === ItemType.YOUR_LIBRARY || props.asset.type === ItemType.DAM_ASSET) detailsInfo.push({ 3933 label: "Format", 3934 value: `${formatFileFormat(props.asset.format)}` 3935 }); 3936 detailsInfo.push({ 3937 label: "Type", 3938 value: MEDIA_TYPE_LABELS[props.asset.mediaType] 3939 }); 3940 if (props.asset.type === ItemType.YOUR_LIBRARY || props.asset.type === ItemType.DAM_ASSET) { 3941 detailsInfo.push({ 3942 label: "Size", 3943 value: formatFileSize(props.asset.size) 3944 }); 3945 detailsInfo.push({ 3946 label: "Resolution", 3947 value: `${props.asset.resolution.width}x${props.asset.resolution.height}` 3948 }); 3949 } 3950 if (props.asset.type !== ItemType.DAM_ASSET) detailsInfo.push({ 3951 label: "Source", 3952 value: getMediaOriginLabel(props.asset) 3953 }); 3954 if (props.asset.type !== ItemType.DAM_ASSET) detailsInfo.push({ 3955 label: !canEditDescription ? "Media description" : void 0, 3956 value: canEditDescription ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.TextField, { 3957 sx: { marginTop: "8px" }, 3958 label: "Media description", 3959 value: description, 3960 error: !!descriptionError, 3961 helperText: descriptionError, 3962 onChange: onDescriptionChange, 3963 onBlur: onDescriptionBlur, 3964 multiline: true, 3965 maxRows: 4 3966 }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Tooltip, { 3967 title: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [ 3968 "Media description is not editable for",
3969 /* @__PURE__ */ (0, import_jsx_runtime.jsx)("br", {}), 3970 "stock media" 3971 ] }), 3972 componentsProps: { tooltip: { sx: { textAlign: "center" } } }, 3973 children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Typography, { 3974 variant: "body2", 3975 color: "text.primary", 3976 sx: { 3977 wordWrap: "break-word", 3978 maxHeight: "90px", 3979 overflow: "auto" 3980 }, 3981 children: description 3982 }) 3983 }) 3984 }); 3985 if (props.asset.type === ItemType.YOUR_LIBRARY && props.asset.origin === GqlClientMediaOrigin.RECORDER) detailsInfo.push({ 3986 label: "Created by", 3987 value: props.asset.createdBy ?? "" 3988 }); 3989 if (props.asset.type === ItemType.DAM_ASSET) detailsInfo.push({ 3990 label: "Creation date", 3991 value: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Typography, { 3992 variant: "body2", 3993 children: TimeUtils.getDesignSystemReadableTimeDate(props.asset.createdAt.getTime()) 3994 }) 3995 }); 3996 return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ItemDetailsPopover, { 3997 open: !!props.anchor, 3998 anchorEl: props.anchor, 3999 onClose: props.onClose, 4000 title: "Media details", 4001 detailsInfo 4002 }); 4003}; 4004//#endregion 4005//#region client/utils/dragAndDrop.ts 4006var DraggedItemType = /* @__PURE__ */ function(DraggedItemType) { 4007 DraggedItemType["FILES"] = "FILES"; 4008 DraggedItemType["DATA"] = "DATA"; 4009 return DraggedItemType; 4010}({}); 4011var MIME_TYPE_PREFIX = "application/vnd.sundaysky."; 4012function dragAndDropMimeType(type) { 4013 return MIME_TYPE_PREFIX + type.toLowerCase(); 4014} 4015function hasDataItems(e) { 4016 return e.dataTransfer.types.some((type) => type.startsWith(MIME_TYPE_PREFIX)); 4017} 4018function hasDirectories(e) { 4019 for (const item of e.dataTransfer.items) if (item.webkitGetAsEntry()?.isDirectory) return true; 4020 return false; 4021} 4022//#endregion 4023//#region client/components/editor/Nooks/UploadAssetMedia/uploadAssetMedia.ts 4024var getUploadedGettyAsset = async (externalAsset, programId, onSuccess, onError, parentFolderId) => { 4025 const onFailureCallback = (payloadData) => { 4026 const { error } = payloadData; 4027 onError?.(error); 4028 }; 4029 const onSuccessCallback = (payloadData) => { 4030 const { data } = payloadData; 4031 onSuccess?.(data?.editorAsset); 4032 }; 4033 const callbacks = { 4034 onProgress: null, 4035 onFailure: onFailureCallback, 4036 onSuccess: onSuccessCallback 4037 }; 4038 const subscriptionOptions = { 4039 query: EditorExternalAssetMediaUploadedDocument, 4040 variables: { accountId: getEditorAccountId() } 4041 }; 4042 if (externalAsset.assetType === EditorLibraryMediaType.Image) await executeBackgroundMutation({ 4043 mutation: UploadExternalEditorAssetImageDocument, 4044 variables: { input: { 4045 assetId: externalAsset.assetId, 4046 libraryType: GqlClientExternalLibrary.GETTY, 4047 subLibraryType: GqlClientExternalSubLibrary.WHOLLY_OWNED, 4048 title: externalAsset.title, 4049 downloadMetadata: externalAsset.downloadSizes.map((size) => { 4050 return { 4051 bytes: String(size.bytes), 4052 height: String(size.height), 4053 contentType: size.media_type 4054 }; 4055 }), 4056 programId, 4057 parentFolderId 4058 } } 4059 }, subscriptionOptions, callbacks); 4060 else if (externalAsset.assetType === EditorLibraryMediaType.Video) await executeBackgroundMutation({ 4061 mutation: UploadExternalEditorAssetVideoDocument, 4062 variables: { input: { 4063 assetId: externalAsset.assetId, 4064 title: externalAsset.title, 4065 libraryType: GqlClientExternalLibrary.GETTY, 4066 subLibraryType: GqlClientExternalSubLibrary.WHOLLY_OWNED, 4067 downloadMetadata: externalAsset.downloadSizes.map((size) => { 4068 return { 4069 bytes: String(size.bytes), 4070 contentType: size.content_type, 4071 format: size.format, 4072 name: size.name 4073 }; 4074 }), 4075 programId, 4076 parentFolderId 4077 } } 4078 }, subscriptionOptions, callbacks); 4079}; 4080async function uploadGettyExternalEditorAssetMedia(externalAsset, programId, onSuccess, onError, parentFolderId) { 4081 try { 4082 if (externalAsset) await getUploadedGettyAsset(externalAsset, programId, onSuccess, onError, parentFolderId); 4083 } catch (error) { 4084 onError(error); 4085 } 4086} 4087async function uploadEditorAssetMediaFromUrl(args, onSuccess, onError) { 4088 const shortFilename = args.filenameWithoutExtension.substring(0, 100); 4089 const updatedArgs = { 4090 ...args, 4091 filenameWithoutExtension: shortFilename 4092 }; 4093 const onFailureCallback = (payloadData) => { 4094 const { error } = payloadData; 4095 onError?.(error); 4096 }; 4097 const onSuccessCallback = (payloadData) => { 4098 const { data } = payloadData; 4099 onSuccess?.(data?.editorAsset); 4100 }; 4101 const callbacks = { 4102 onProgress: null, 4103 onFailure: onFailureCallback, 4104 onSuccess: onSuccessCallback 4105 }; 4106 const subscriptionOptions = { 4107 query: EditorAssetMediaFromUrlUploadedDocument, 4108 variables: { accountId: getEditorAccountId() } 4109 };
4110 await executeBackgroundMutation({ 4111 mutation: UploadEditorAssetMediaFromUrlDocument, 4112 variables: { input: updatedArgs } 4113 }, subscriptionOptions, callbacks); 4114} 4115async function uploadOptimizedEditorAssetMedia(file, programId, onSuccess, onError, metadata, parentFolderId, skipTranscode, forceTranscode, mediaOrigin, overrideFileLimits = false) { 4116 try { 4117 const accountId = getEditorAccountId(); 4118 const { error, fileData } = await processUploadAssetMediaInput(file, ["video", "image"], overrideFileLimits); 4119 if (error) { 4120 onError(file.name, error); 4121 return; 4122 } 4123 if (fileData) { 4124 const options = { 4125 mutation: UploadOptimizedEditorAssetMediaDocument, 4126 variables: { input: { 4127 file, 4128 filename: file.name, 4129 fileType: fileData.fileType, 4130 parentMediaId: metadata?.parentMediaId, 4131 processingData: metadata?.processingData, 4132 enhancedProcessingData: metadata?.enhancedProcessingData, 4133 saveEditedMediaToLibrary: metadata?.saveEditedMediaToLibrary, 4134 programId, 4135 parentFolderId, 4136 skipTranscode, 4137 forceTranscode, 4138 mediaOrigin, 4139 isInternalSource: overrideFileLimits, 4140 sourceMediaContributions: metadata?.sourceMediaContributions 4141 } } 4142 }; 4143 const onFailureCallback = (payloadData) => { 4144 const { fileName, error } = payloadData; 4145 if (getProcessedFileIndex(fileName) >= 0) handleFileUploadError(fileName, new EnhancedError(error, error?.sskyCode), UploadFileContext.MediaAssetLibrary); 4146 onError?.(fileName, error); 4147 }; 4148 const onSuccessCallback = (payloadData) => { 4149 const { fileName, data } = payloadData; 4150 const mediaType = data?.editorAsset?.mediaMetadata?.mediaType; 4151 if (getProcessedFileIndex(fileName) >= 0) upsertProcessedFile({ 4152 fileName, 4153 type: `${mediaType}/*`, 4154 status: "success" 4155 }); 4156 onSuccess?.(fileName, fileData.fileType, data?.editorAsset); 4157 }; 4158 await executeBackgroundMutation(options, { 4159 query: EditorAssetMediaUploadedDocument, 4160 variables: { accountId } 4161 }, { 4162 onProgress: null, 4163 onFailure: onFailureCallback, 4164 onSuccess: onSuccessCallback 4165 }); 4166 } 4167 } catch (error) { 4168 onError(file.name, error); 4169 return; 4170 } 4171} 4172//#endregion 4173//#region client/components/editor/Components/TruffleEditingWorkSpace/Components/Libraries/Components/TruffleMediaLibrary/AssetGrid/common.ts 4174var popoverSxProps = { "& .MuiPopover-paper": { 4175 minWidth: "211px", 4176 maxWidth: "273px" 4177} }; 4178var headerSxProps = { 4179 display: "flex", 4180 flexDirection: "column", 4181 gap: "8px", 4182 padding: "8px 16px 0" 4183}; 4184var typographySxProps = { 4185 textOverflow: "ellipsis", 4186 overflow: "hidden", 4187 whiteSpace: "nowrap" 4188}; 4189var handleDragStart = (e, item, setIsAssetBeingDragged) => { 4190 if (item.type === ItemType.YOUR_LIBRARY || item.type === ItemType.FOLDER) setMediaLibraryDraggingFromFolderId(item.parentFolderId); 4191 const div = document.createElement("div"); 4192 const dataDraggedAssetId = v4(); 4193 if (item.type === ItemType.YOUR_LIBRARY || item.type === ItemType.STOCK || item.type === ItemType.AI_IMAGE || item.type === ItemType.DAM_ASSET) { 4194 const image = new Image(); 4195 image.src = item.thumbnailUrl; 4196 image.style.maxWidth = "155px"; 4197 image.style.maxHeight = "155px"; 4198 div.appendChild(image); 4199 } 4200 div.style.position = "absolute"; 4201 div.style.top = "0px"; 4202 div.style.left = "-500px"; 4203 div.setAttribute("data-dragged-media-asset-id", dataDraggedAssetId); 4204 document.querySelector("body").appendChild(div); 4205 setIsAssetBeingDragged && setIsAssetBeingDragged(true); 4206 e.dataTransfer.setDragImage(div, 10, 10); 4207 e.dataTransfer.setData(dragAndDropMimeType(item.type), JSON.stringify({ 4208 ...item, 4209 dataDraggedAssetId 4210 })); 4211 e.dataTransfer.effectAllowed = "move"; 4212}; 4213var handleDragEnd = (setIsAssetBeingDragged) => { 4214 setIsAssetBeingDragged && setIsAssetBeingDragged(false); 4215 document.querySelector("[data-dragged-media-asset-id]")?.remove(); 4216 setMediaLibraryDraggingFromFolderId(null); 4217}; 4218var handleGettyExternalAssetUpload = (programId, programVersionId, stockAsset, destinationFolderId, setActiveTab, setCurrentFolderId, setSelectedItemData, onSuccessCallback, shouldShowSuccessSnackbar = true) => { 4219 const destinationFolderName = getFolderName(destinationFolderId); 4220 const normalizedDestinationName = destinationFolderName ? "folder" : "Your Media"; 4221 const assetLibrary = getAssetLibrary(); 4222 if (assetLibrary) { 4223 const existingAsset = (assetLibrary.media ?? []).filter((asset) => asset.lifecycleStage === GqlClientAssetLifecycleStage.ENABLED && asset.mediaClassification !== GqlClientMediaClassification.HIDDEN && (asset.mediaOrigin === GqlClientMediaOrigin.USER || asset.mediaOrigin === GqlClientMediaOrigin.EXTERNAL || asset.mediaOrigin === GqlClientMediaOrigin.AI_GENERATED)).find((asset) => asset.externalLibraryAssetId === stockAsset.id && asset.folder?.id === destinationFolderId); 4224 if (existingAsset) {
4225 setNeutralNotification({ 4226 message: `This asset already exists in ${normalizedDestinationName}`, 4227 showCloseButton: true, 4228 actionButton: { 4229 label: `Show in ${destinationFolderName ? "Folder" : "Your Media"}`, 4230 onClick: () => { 4231 closeNotification(); 4232 setActiveTab(MediaLibraryActiveTab.YourLibrary); 4233 setCurrentFolderId(destinationFolderId); 4234 setTimeout(() => { 4235 setSelectedItemData({ 4236 type: ItemType.YOUR_LIBRARY, 4237 id: existingAsset.id, 4238 mediaLocation: existingAsset.mediaLocation, 4239 mediaUrl: existingAsset.mediaUrl, 4240 mediaAgifUrl: existingAsset.mediaAgifUrl 4241 }); 4242 assetGridEventTarget.scrollToAsset(existingAsset.id); 4243 }, 0); 4244 } 4245 } 4246 }); 4247 return; 4248 } 4249 } 4250 const proceed = async () => { 4251 upsertProcessedFile({ 4252 fileName: stockAsset.name, 4253 status: "loading" 4254 }); 4255 const onError = (error) => { 4256 upsertProcessedFile({ 4257 fileName: stockAsset.name, 4258 sskyCode: SskyErrorCode.AssetUploadError 4259 }); 4260 setErrorNotification({ 4261 message: `Failed to add media asset to ${normalizedDestinationName}`, 4262 showCloseButton: true 4263 }); 4264 }; 4265 const onSuccess = (uploadedAsset) => { 4266 upsertProcessedFile({ 4267 fileName: stockAsset.name, 4268 type: `${stockAsset.mediaType}/*`, 4269 status: "success" 4270 }); 4271 shouldShowSuccessSnackbar && setSuccessNotification({ 4272 message: `Media asset added to ${normalizedDestinationName}`, 4273 showCloseButton: true, 4274 actionButton: { 4275 label: `Go to ${destinationFolderName ? "Folder" : "Your Media"}`, 4276 onClick: () => goToFolder(destinationFolderId, setActiveTab, setCurrentFolderId) 4277 } 4278 }); 4279 PendoService.getInstance().trackEvent("Media lib add asset", { 4280 mediaType: uploadedAsset?.mediaMetadata?.mediaType, 4281 mediaSize: Math.round(uploadedAsset.mediaMetadata.size / 1024).toString(), 4282 mediaAddOrigin: UploadOrigin.STOCK_3_DOTS_MENU, 4283 mediaAddTarget: destinationFolderName ? "folder" : "lib root" 4284 }); 4285 onSuccessCallback?.(destinationFolderId); 4286 }; 4287 await uploadGettyExternalEditorAssetMedia({ 4288 assetId: stockAsset.id, 4289 assetType: stockAsset.mediaType, 4290 downloadSizes: stockAsset.downloadSizes, 4291 title: stockAsset.name 4292 }, programId, onSuccess, onError, destinationFolderId); 4293 }; 4294 proceed(); 4295}; 4296var handleExternalAssetUpload = async (params) => { 4297 const { asset, successNotificationButtonParams, destinationFolderId } = params; 4298 const uploadMediaArgs = asset.type === ItemType.AI_IMAGE ? { 4299 url: asset.mediaUrl, 4300 filenameWithoutExtension: asset.name, 4301 mediaSource: GqlClientUploadEditorAssetFromUrlMediaSource.AI_GENERATED, 4302 aiGeneratedMediaDetails: { 4303 prompt: asset.prompt, 4304 system: asset.service 4305 } 4306 } : { 4307 url: asset.downloadUrl, 4308 filenameWithoutExtension: asset.name, 4309 mediaSource: GqlClientUploadEditorAssetFromUrlMediaSource.EXTERNAL, 4310 externalAssetDetails: { 4311 externalLibrary: asset.externalLibrary, 4312 externalLibraryAssetId: asset.id 4313 } 4314 }; 4315 upsertProcessedFile({ 4316 fileName: asset.name, 4317 status: "loading" 4318 }); 4319 const folderName = destinationFolderId ? "folder" : "Your Media"; 4320 const mediaInfo = { 4321 ...uploadMediaArgs, 4322 parentFolderId: destinationFolderId 4323 }; 4324 const onError = (error) => { 4325 upsertProcessedFile({ 4326 fileName: asset.name, 4327 sskyCode: SskyErrorCode.AssetUploadError 4328 }); 4329 setErrorNotification({ 4330 message: `Failed to add media asset to ${folderName}`, 4331 showCloseButton: true 4332 }); 4333 }; 4334 const onSuccess = (uploadedAsset) => { 4335 upsertProcessedFile({ 4336 fileName: asset.name, 4337 type: `${asset.mediaType}/*`, 4338 status: "success" 4339 }); 4340 const { setActiveTab, setCurrentFolderId } = successNotificationButtonParams ?? {}; 4341 setSuccessNotification({ 4342 message: `Media asset added to ${folderName}`, 4343 showCloseButton: true, 4344 actionButton: successNotificationButtonParams ? { 4345 label: `Go to ${destinationFolderId ? "Folder" : "Your Media"}`, 4346 onClick: () => goToFolder(destinationFolderId, setActiveTab, setCurrentFolderId) 4347 } : void 0 4348 }); 4349 PendoService.getInstance().trackEvent("Media lib add asset", { 4350 mediaType: uploadedAsset.mediaMetadata.mediaType, 4351 mediaSize: Math.round(uploadedAsset.mediaMetadata.size / 1024).toString(), 4352 mediaAddOrigin: asset.type === ItemType.AI_IMAGE ? UploadOrigin.AI_IMAGE_GENERATOR_ADD : UploadOrigin.ACQUIA_ADD, 4353 mediaAddTarget: destinationFolderId ? "folder" : "lib root" 4354 }); 4355 }; 4356 await uploadEditorAssetMediaFromUrl(mediaInfo, onSuccess, onError); 4357}; 4358var handleUploadAiImageAsset = async (params) => { 4359 const { asset, onUploadSuccess } = params; 4360 const uploadMediaArgs = { 4361 url: asset.mediaUrl, 4362 filenameWithoutExtension: asset.name, 4363 mediaSource: GqlClientUploadEditorAssetFromUrlMediaSource.AI_GENERATED, 4364 aiGeneratedMediaDetails: { 4365 prompt: asset.prompt, 4366 system: asset.service 4367 } 4368 }; 4369 upsertProcessedFile({ 4370 fileName: asset.name, 4371 status: "loading" 4372 }); 4373 const mediaInfo = { ...uploadMediaArgs }; 4374 const onError = (error) => { 4375 upsertProcessedFile({ 4376 fileName: asset.name,
4377 sskyCode: SskyErrorCode.AssetUploadError 4378 }); 4379 setErrorNotification({ 4380 message: "Failed to save media asset to library", 4381 showCloseButton: true 4382 }); 4383 }; 4384 const onSuccess = (uploadedAsset) => { 4385 upsertProcessedFile({ 4386 fileName: asset.name, 4387 type: `${asset.mediaType}/*`, 4388 status: "success" 4389 }); 4390 setSuccessNotification({ 4391 message: "Media asset saved to library", 4392 showCloseButton: true 4393 }); 4394 PendoService.getInstance().trackEvent("Media lib add asset", { 4395 mediaType: uploadedAsset.mediaMetadata.mediaType, 4396 mediaSize: Math.round(uploadedAsset.mediaMetadata.size / 1024).toString(), 4397 mediaAddOrigin: UploadOrigin.AI_IMAGE_GENERATOR_ADD, 4398 mediaAddTarget: "folder" 4399 }); 4400 onUploadSuccess?.(uploadedAsset.id); 4401 }; 4402 await uploadEditorAssetMediaFromUrl(mediaInfo, onSuccess, onError); 4403}; 4404var GridItem = (0, import_material.styled)(import_material.Box, { shouldForwardProp: (prop) => prop !== "itemWidth" && prop !== "itemHeight" })(({ itemWidth, itemHeight }) => ({ 4405 width: typeof itemWidth === "string" ? itemWidth : `${itemWidth}px`, 4406 height: `${itemHeight}px` 4407})); 4408var TextItemWrapperSxProps = { 4409 display: "flex", 4410 flexDirection: "column", 4411 gap: "4px", 4412 paddingBottom: "16px" 4413}; 4414var getCenteredGridItemStyle = (itemCount, columnCount) => { 4415 const emptyCells = itemCount % columnCount === 0 ? 0 : columnCount - itemCount % columnCount; 4416 const right = -1 * emptyCells * 174; 4417 const top = emptyCells === columnCount - 1 ? 0 : 131; 4418 return { 4419 position: "absolute", 4420 right: `${right}px`, 4421 top: `${top}px` 4422 }; 4423}; 4424var DraggableGridItem = (0, import_material.styled)(GridItem)({ 4425 "&[aria-grabbed=true]": { opacity: "0.5" }, 4426 "&[draggable=true]": { 4427 cursor: "grab", 4428 "&:active": { cursor: "grabbing" } 4429 } 4430}); 4431var AssetGridEventTarget = class extends EventTarget { 4432 addEventListener(type, listener, options) { 4433 return super.addEventListener(type, listener, options); 4434 } 4435 removeEventListener(type, listener, options) { 4436 return super.removeEventListener(type, listener, options); 4437 } 4438 scrollToTop() { 4439 this.dispatchEvent(new CustomEvent("scrollToTop")); 4440 } 4441 scrollToAsset(id) { 4442 this.dispatchEvent(new CustomEvent("scrollToAsset", { detail: { id } })); 4443 } 4444}; 4445var assetGridEventTarget = new AssetGridEventTarget(); 4446var cardSxProps = { 4447 position: "relative", 4448 height: "100%", 4449 width: "100%", 4450 "&:hover,div:focus-visible>&": { outline: (theme) => `1px solid ${theme.palette.primary.main}` }, 4451 "&:hover,div:focus-within>&": { "& .MuiIconButton-root": { opacity: 1 } } 4452}; 4453var gridCardSxProps = { "&[aria-selected=true]": { 4454 outline: (theme) => `2px solid ${theme.palette.primary.main}`, 4455 outlineOffset: "-1px" 4456} }; 4457var skeletonSxProps = { 4458 position: "absolute", 4459 top: 0, 4460 left: 0, 4461 bottom: 0, 4462 right: 0 4463}; 4464var FolderContainerSxProps = { 4465 ...gridCardSxProps, 4466 border: (theme) => `1px solid ${theme.palette.grey[300]}`, 4467 "[aria-grabbed=false] &[data-drag-pending=true]": { border: (theme) => `1px dashed ${theme.palette.primary.light}` }, 4468 "[aria-grabbed=false] &[data-drag-active=true]": { border: (theme) => `1px dashed ${theme.palette.primary.main}` }, 4469 "[aria-grabbed=false] &[data-drag-active=true][aria-invalid=true]": { border: (theme) => `1px dashed ${theme.palette.error.main}` } 4470}; 4471var FolderIcon = (0, import_material.styled)("img")({ 4472 height: "36px", 4473 pointerEvents: "none" 4474}); 4475var FolderButtonContainerSxProps = { 4476 width: "100%", 4477 height: "100%", 4478 display: "flex", 4479 flexDirection: "column", 4480 cursor: "inherit" 4481}; 4482var FolderNameSxProps = (gridview = true) => ({ 4483 width: "100%", 4484 ...gridview && { padding: "4px" }, 4485 textWrap: "nowrap", 4486 textOverflow: "ellipsis", 4487 overflow: "hidden", 4488 alignSelf: "flex-start", 4489 textAlign: "start" 4490}); 4491var virtualizedItemTooltipProps = { 4492 ...import_dist$3.commonTooltipProps, 4493 PopperProps: { 4494 ...import_dist$3.commonTooltipProps.PopperProps, 4495 disablePortal: true 4496 } 4497}; 4498//#endregion 4499//#region client/components/editor/Components/TruffleEditingWorkSpace/Components/Libraries/Components/TruffleMediaLibrary/AssetGrid/AssetThreeDotsMenu.tsx 4500var AssetThreeDotsMenu = ({ asset, anchor, closeMenu, onMenuClosed, openSelectFolderDialog, openRemoveAssetDialog, showFolderActionsSuccess, onMoveComplete, skipCtaOnAddExternalAssetToLibrary, lastUpdated }) => { 4501 const { setActiveTab, setCurrentFolderId, setSelectedItemData } = (0, import_react.useContext)(TruffleMediaLibraryContext); 4502 const programId = useEditorProgramId(); 4503 const programVersionId = useEditorProgramVersionId();
4504 const [detailsAnchor, setDetailsAnchor] = (0, import_react.useState)(null); 4505 const [selectedMenuItem, setSelectedMenuItem] = (0, import_react.useState)(null); 4506 const { media, pathFromRoot } = getMediaFolder(asset.type === ItemType.YOUR_LIBRARY ? asset.parentFolderId : null); 4507 const stringPathFromRoot = pathFromRoot?.map((item) => item.name).join(" / "); 4508 const handleDetailsClick = (e) => { 4509 setDetailsAnchor(e.currentTarget); 4510 setSelectedMenuItem("Details"); 4511 }; 4512 const handleDetailsClose = () => { 4513 setDetailsAnchor(null); 4514 closeMenu(); 4515 }; 4516 const handleRemoveClick = () => { 4517 if (asset.type === ItemType.YOUR_LIBRARY) { 4518 closeMenu(); 4519 openRemoveAssetDialog(); 4520 } 4521 }; 4522 const handleMoveClick = () => { 4523 closeMenu(); 4524 openSelectFolderDialog(); 4525 }; 4526 const addExternalAssetToLibrary = async () => { 4527 if (asset.type === ItemType.STOCK) { 4528 closeMenu(); 4529 const rootFolder = getRootFolder(); 4530 handleGettyExternalAssetUpload(programId, programVersionId, asset, rootFolder?.id, setActiveTab, setCurrentFolderId, setSelectedItemData, onMoveComplete, showFolderActionsSuccess); 4531 } 4532 if (asset.type === ItemType.AI_IMAGE || asset.type === ItemType.DAM_ASSET) { 4533 closeMenu(); 4534 handleExternalAssetUpload({ 4535 asset, 4536 successNotificationButtonParams: skipCtaOnAddExternalAssetToLibrary ? void 0 : { 4537 setActiveTab, 4538 setCurrentFolderId 4539 } 4540 }); 4541 } 4542 }; 4543 const createdBy = useEditorAccountUserName(asset.type === ItemType.YOUR_LIBRARY ? asset.createdBy : null); 4544 const addedBy = createdBy ? `, ${createdBy}` : ""; 4545 const added = asset.type === ItemType.YOUR_LIBRARY ? TimeUtils.getDesignSystemReadableTimeDate(asset.createdAt) + addedBy : ""; 4546 const getAddOrMoveToFolderTrackingId = () => { 4547 if (asset.type === ItemType.YOUR_LIBRARY) return "tracking-id-media-lib-your-lib-move-to-folder"; 4548 if (asset.type === ItemType.AI_IMAGE) return "tracking-id-ai-image-generator-result-add-to-folder"; 4549 if (asset.type === ItemType.DAM_ASSET) return "tracking-id-media-lib-acquia-asset-3dots-menu-add-to-folder"; 4550 return "tracking-id-media-lib-stock-add-to-folder"; 4551 }; 4552 const getAddToYourMediaTrackingId = () => { 4553 if (asset.type === ItemType.AI_IMAGE) return "tracking-id-ai-image-generator-result-add-to-your-media"; 4554 if (asset.type === ItemType.DAM_ASSET) return "tracking-id-media-lib-acquia-asset-3dots-menu-add-to-lib"; 4555 return "tracking-id-media-lib-stock-add-to-lib"; 4556 }; 4557 const menuItems = [ 4558 { 4559 label: "Details", 4560 icon: import_faInfoCircle.faInfoCircle, 4561 dataTrackingId: asset.type === ItemType.DAM_ASSET ? "tracking-id-media-lib-acquia-asset-3dots-menu-details" : "tracking-id-media-lib-media-3dots-menu-details", 4562 hidden: asset.type === ItemType.AI_IMAGE, 4563 onClick: handleDetailsClick 4564 }, 4565 { 4566 label: asset.type === ItemType.YOUR_LIBRARY ? "Move to Folder" : "Add to Folder", 4567 icon: import_faFolderClosed.faFolderClosed, 4568 hidden: false, 4569 onClick: handleMoveClick, 4570 trackingId: getAddOrMoveToFolderTrackingId() 4571 }, 4572 { 4573 label: "Add to Your Media", 4574 icon: import_faCloudPlus.faCloudPlus, 4575 hidden: asset.type === ItemType.YOUR_LIBRARY, 4576 onClick: addExternalAssetToLibrary, 4577 trackingId: getAddToYourMediaTrackingId() 4578 }, 4579 { 4580 label: "Delete", 4581 icon: import_faTrashAlt.faTrashAlt, 4582 trackingId: "tracking-id-media-lib-asset-3dots-menu-remove", 4583 hidden: asset.type === ItemType.STOCK || asset.type === ItemType.AI_IMAGE || asset.type === ItemType.DAM_ASSET, 4584 onClick: handleRemoveClick 4585 } 4586 ]; 4587 const getAssetNamesInFolder = (media, asset) => { 4588 return media.filter((item) => item.name !== asset?.name && item.lifecycleStage === GqlClientAssetLifecycleStage.ENABLED).map((media) => media.name?.toLowerCase()) || []; 4589 }; 4590 const validateEditedAssetName = (newValue) => { 4591 if (newValue.trim() === "") return ASSET_NAME_CANNOT_BE_EMPTY; 4592 if (getAssetNamesInFolder(media, asset).some((sibling) => sibling === newValue.trim().toLowerCase())) return ASSET_NAME_ALREADY_EXISTS; 4593 return null; 4594 }; 4595 const onRenameAsset = async (newName) => { 4596 await updateEditorAssetMedia(asset.id, newName, void 0); 4597 PendoService.getInstance().trackEvent("Media asset name change", { 4598 originMediaName: asset.name, 4599 targetMediaName: newName 4600 }); 4601 }; 4602 return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_material.Menu, { 4603 open: !!anchor, 4604 anchorEl: anchor, 4605 sx: popoverSxProps, 4606 TransitionProps: { onExited: onMenuClosed }, 4607 onClose: closeMenu, 4608 children: [
4609 asset.type === ItemType.YOUR_LIBRARY && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_material.Box, { 4610 sx: headerSxProps, 4611 children: [asset.classification === GqlClientMediaClassification.ORIGINAL && asset.origin === GqlClientMediaOrigin.EXTERNAL && asset.externalLibrary === GqlClientExternalLibrary.GETTY ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Tooltip, { 4612 title: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [ 4613 "Name editing is not available for", 4614 /* @__PURE__ */ (0, import_jsx_runtime.jsx)("br", {}), 4615 "media from stock" 4616 ] }), 4617 componentsProps: { tooltip: { sx: { textAlign: "center" } } }, 4618 children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Typography, { 4619 variant: "subtitle1", 4620 sx: typographySxProps, 4621 children: asset.name 4622 }) 4623 }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dist$3.DeprecatedInlineTextField, { 4624 sx: { "& .MuiInput-input": { 4625 overflow: "hidden", 4626 textOverflow: "ellipsis" 4627 } }, 4628 value: asset.name, 4629 validate: validateEditedAssetName, 4630 onConfirmChange: onRenameAsset, 4631 editIconTooltip: "Rename" 4632 }), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_material.Typography, { 4633 variant: "body1", 4634 color: "text.primary", 4635 sx: typographySxProps, 4636 children: ["Added:\xA0", /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Tooltip, { 4637 title: added, 4638 componentsProps: { tooltip: { sx: { maxWidth: "none" } } }, 4639 children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: added }) 4640 })] 4641 })] 4642 }) }),
4643 asset.type === ItemType.STOCK && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Box, { 4644 sx: headerSxProps, 4645 children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Typography, { 4646 variant: "subtitle1", 4647 sx: typographySxProps, 4648 children: asset.id 4649 }) 4650 }) }), 4651 asset.type === ItemType.DAM_ASSET && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_material.Box, { 4652 sx: headerSxProps, 4653 children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dist$3.TypographyWithTooltipOnOverflow, { 4654 variant: "subtitle1", 4655 sx: typographySxProps, 4656 children: asset.name 4657 }), !!lastUpdated && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_material.Stack, { 4658 direction: "row", 4659 spacing: "4px", 4660 children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Typography, { 4661 variant: "body1", 4662 color: "text.primary", 4663 sx: typographySxProps, 4664 children: "Last updated:" 4665 }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Typography, { 4666 variant: "body1", 4667 sx: typographySxProps, 4668 color: "text.primary", 4669 children: TimeUtils.getDesignSystemReadableTimeDate(lastUpdated.getTime()) 4670 })] 4671 })] 4672 }), 4673 asset.type !== ItemType.AI_IMAGE && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Divider, { sx: { margin: "8px 0" } }), 4674 /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Box, { children: menuItems.filter((item) => !item.hidden).map((item) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_dist$3.TruffleMenuItem, { 4675 dense: true, 4676 "aria-label": item.label, 4677 onClick: item.onClick, 4678 "data-tracking-id": item.trackingId || `media-lib-asset-3dots-menu-${item.label}`, 4679 selected: selectedMenuItem === item.label, 4680 children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.ListItemIcon, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FontAwesomeIcon, { icon: item.icon }) }
4680), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.ListItemText, { primary: item.label })] 4681 }, item.label)) }) 4682 ] 4683 }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AssetDetailsPopover, { 4684 anchor: detailsAnchor, 4685 onClose: handleDetailsClose, 4686 asset, 4687 onRenameAsset, 4688 assetPathFromRoot: stringPathFromRoot, 4689 validateAssetName: validateEditedAssetName 4690 })] }); 4691}; 4692//#endregion 4693//#region client/components/editor/Components/TruffleEditingWorkSpace/Components/Libraries/Components/TruffleMediaLibrary/AssetGrid/FolderThreeDotsMenu.tsx 4694var FolderThreeDotsMenu = ({ folder, anchor, closeMenu, onMenuClosed, openSelectFolderDialog, openRemoveFolderDialog }) => { 4695 const [detailsAnchor, setDetailsAnchor] = (0, import_react.useState)(null); 4696 const mediaFolderData = getMediaFolder(folder.id); 4697 const { folders: siblingFolders } = getMediaFolder(mediaFolderData?.parentFolder?.id); 4698 const siblingFolderNames = siblingFolders.filter((siblingFolder) => siblingFolder.id !== folder.id).map((siblingFolder) => siblingFolder.name); 4699 const [selectedMenuItem, setSelectedMenuItem] = (0, import_react.useState)(null); 4700 const [name, setName] = (0, import_react.useState)(folder.name); 4701 const [nameError, setNameError] = (0, import_react.useState)(null); 4702 const { palette } = (0, import_material.useTheme)(); 4703 (0, import_react.useEffect)(() => { 4704 setName(folder.name); 4705 }, [folder.name]); 4706 if (!mediaFolderData) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {}); 4707 const { media, folders, pathFromRoot, parentFolder } = mediaFolderData; 4708 const stringPathFromRoot = pathFromRoot?.map((item) => item.name).join(" / "); 4709 const handleMoveClick = () => { 4710 closeMenu(); 4711 openSelectFolderDialog(); 4712 }; 4713 const handleRemoveClick = () => { 4714 closeMenu(); 4715 openRemoveFolderDialog(); 4716 }; 4717 const handleDetailsClick = (e) => { 4718 setDetailsAnchor(e.currentTarget); 4719 setSelectedMenuItem("Details"); 4720 }; 4721 const handleDetailsClose = () => { 4722 setDetailsAnchor(null); 4723 closeMenu(); 4724 }; 4725 const menuItems = [ 4726 { 4727 label: "Details", 4728 icon: import_faInfoCircle.faInfoCircle, 4729 onClick: handleDetailsClick, 4730 trackingId: "tracking-id-media-lib-folder-3dots-menu-details" 4731 }, 4732 { 4733 label: "Move to Folder", 4734 icon: import_faFolderClosed.faFolderClosed, 4735 onClick: handleMoveClick, 4736 trackingId: "tracking-id-media-lib-folder-3dots-menu-move-to-folder" 4737 }, 4738 { 4739 label: "Delete", 4740 icon: import_faTrashAlt.faTrashAlt, 4741 onClick: handleRemoveClick, 4742 trackingId: "tracking-id-media-lib-folder-3dots-menu-delete" 4743 } 4744 ]; 4745 const onRenameFolder = async (newName) => { 4746 if ((await renameEditorAssetFolder(folder.id, newName.trim(), parentFolder.id))?.result === GqlClientRenameEditorAssetFolderResult.SUCCESS) PendoService.getInstance().trackEvent("Media folder name change", { 4747 targetFolderName: newName, 4748 originFolderName: folder.name 4749 }); 4750 }; 4751 const onDetailsNameChange = (e) => { 4752 setNameError(null); 4753 const newName = e.target.value; 4754 setName(newName); 4755 const validationResult = validateEditedFolderName(newName, siblingFolderNames); 4756 if (validationResult) setNameError(validationResult); 4757 }; 4758 const onDetailsNameBlur = async () => { 4759 if (nameError) { 4760 setName(folder.name); 4761 setNameError(null); 4762 } else await onRenameFolder(name); 4763 }; 4764 const detailsItems = [ 4765 { value: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.TextField, { 4766 label: "Folder name", 4767 value: name, 4768 error: !!nameError, 4769 helperText: nameError, 4770 onChange: onDetailsNameChange, 4771 onBlur: onDetailsNameBlur, 4772 multiline: true 4773 }) }, 4774 { 4775 label: { 4776 text: "Location", 4777 icon: import_faFolderClosed.faFolderClosed 4778 }, 4779 value: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dist$3.TypographyWithTooltipOnOverflow, { 4780 sx: pathSxProps, 4781 children: stringPathFromRoot 4782 }) 4783 }, 4784 { 4785 label: "Number of items:", 4786 value: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Box, { 4787 sx: { 4788 display: "flex", 4789 flexDirection: "column" 4790 }, 4791 children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Typography, { children: folders.length + media?.length }) 4792 }) 4793 }, 4794 { 4795 label: "Last Edited", 4796 value: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_material.Box, { 4797 sx: { 4798 display: "flex", 4799 flexDirection: "column" 4800 }, 4801 children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Typography, { children: folder.updated ? TimeUtils.getDesignSystemReadableTimeDate(folder.updated) : "-" }
4801), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Typography, { children: folder.updatedBy ? folder.updatedBy : "" })] 4802 }) 4803 }, 4804 { 4805 label: "Creation Date", 4806 value: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_material.Box, { 4807 sx: { 4808 display: "flex", 4809 flexDirection: "column" 4810 }, 4811 children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Typography, { children: folder.created ? TimeUtils.getDesignSystemReadableTimeDate(folder.created) : "-" }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Typography, { children: folder.createdBy ? folder.createdBy : "" })] 4812 }) 4813 } 4814 ]; 4815 return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_material.Menu, { 4816 open: !!anchor, 4817 anchorEl: anchor, 4818 sx: popoverSxProps, 4819 onClose: closeMenu, 4820 TransitionProps: { onExited: onMenuClosed }, 4821 children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_material.Box, { 4822 sx: headerSxProps, 4823 children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dist$3.DeprecatedInlineTextField, { 4824 value: folder.name, 4825 onConfirmChange: onRenameFolder, 4826 validate: (newValue) => validateEditedFolderName(newValue, siblingFolderNames), 4827 editIconTooltip: "Rename" 4828 }), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_material.Box, { 4829 sx: folderPathSxProps, 4830 children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(FontAwesomeIcon, { 4831 icon: import_faFolderClosed.faFolderClosed, 4832 style: { 4833 fontSize: "14px", 4834 color: palette.action.active 4835 } 4836 }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Tooltip, { 4837 title: stringPathFromRoot, 4838 componentsProps: { tooltip: { sx: { maxWidth: "none" } } }, 4839 children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Typography, { 4840 variant: "body2", 4841 sx: (0, import_dist$3.combineSxProps)(typographySxProps, { 4842 direction: "rtl", 4843 textAlign: "left", 4844 color: "text.secondary" 4845 }), 4846 children: stringPathFromRoot 4847 }) 4848 })] 4849 })] 4850 }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Divider, { sx: { margin: "8px 0" } })] }
4850), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Box, { children: menuItems.filter((item) => !item.hidden).map((item) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_material.MenuItem, { 4851 dense: true, 4852 "aria-label": item.label, 4853 disabled: item.disabled, 4854 onClick: item.onClick, 4855 "data-tracking-id": item.trackingId || `media-lib-folder-3dots-menu-${item.label}`, 4856 selected: selectedMenuItem === item.label, 4857 children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.ListItemIcon, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FontAwesomeIcon, { icon: item.icon }) }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.ListItemText, { primary: item.label })] 4858 }, item.label)) })] 4859 }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ItemDetailsPopover, { 4860 open: !!detailsAnchor, 4861 anchorEl: detailsAnchor, 4862 title: "Folder details", 4863 detailsInfo: detailsItems, 4864 onClose: handleDetailsClose 4865 })] }); 4866}; 4867var folderPathSxProps = { 4868 display: "flex", 4869 flexDirection: "row", 4870 gap: "10px", 4871 alignItems: "center" 4872}; 4873//#endregion 4874//#region node_modules/@fortawesome/pro-regular-svg-icons/faArrowUpRightAndArrowDownLeftFromCenter.js 4875var require_faArrowUpRightAndArrowDownLeftFromCenter = /* @__PURE__ */ __commonJSMin(((exports) => { 4876 Object.defineProperty(exports, "__esModule", { value: true }); 4877 var prefix = "far"; 4878 var iconName = "arrow-up-right-and-arrow-down-left-from-center"; 4879 var width = 512; 4880 var height = 512; 4881 var aliases = []; 4882 var unicode = "e0a0"; 4883 var svgPathData = "M295 183c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l135-135 0 86.1c0 13.3 10.7 24 24 24s24-10.7 24-24l0-144c0-13.3-10.7-24-24-24L344 0c-13.3 0-24 10.7-24 24s10.7 24 24 24l86.1 0-135 135zM217 329c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0L48 430.1 48 344c0-13.3-10.7-24-24-24S0 330.7 0 344L0 488c0 13.3 10.7 24 24 24l144 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-86.1 0 135-135z"; 4884 exports.definition = { 4885 prefix, 4886 iconName, 4887 icon: [ 4888 width, 4889 height, 4890 aliases, 4891 unicode, 4892 svgPathData 4893 ] 4894 }; 4895 exports.faArrowUpRightAndArrowDownLeftFromCenter = exports.definition; 4896 exports.prefix = prefix; 4897 exports.iconName = iconName; 4898 exports.width = width; 4899 exports.height = height; 4900 exports.ligatures = aliases; 4901 exports.unicode = unicode; 4902 exports.svgPathData = svgPathData; 4903 exports.aliases = aliases; 4904})); 4905//#endregion 4906//#region node_modules/@fortawesome/pro-solid-svg-icons/faSparkles.js 4907var require_faSparkles = /* @__PURE__ */ __commonJSMin(((exports) => { 4908 Object.defineProperty(exports, "__esModule", { value: true }); 4909 var prefix = "fas"; 4910 var iconName = "sparkles"; 4911 var width = 576; 4912 var height = 512; 4913 var aliases = [10024]; 4914 var unicode = "f890"; 4915 var svgPathData = "M391.5 53.2c-4.5 1.7-7.5 6-7.5 10.8s3 9.1 7.5 10.8L448 96 469.2 152.5c1.7 4.5 6 7.5 10.8 7.5s9.1-3 10.8-7.5L512 96 568.5 74.8c4.5-1.7 7.5-6 7.5-10.8s-3-9.1-7.5-10.8L512 32 490.8-24.5c-1.7-4.5-6-7.5-10.8-7.5s-9.1 3-10.8 7.5L448 32 391.5 53.2zm-185 20.1c-2.6-5.7-8.3-9.3-14.5-9.3s-11.9 3.6-14.5 9.3l-53.1 115-115 53.1C3.6 244.1 0 249.8 0 256s3.6 11.9 9.3 14.5l115 53.1 53.1 115c2.6 5.7 8.3 9.3 14.5 9.3s11.9-3.6 14.5-9.3l53.1-115 115-53.1c5.7-2.6 9.3-8.3 9.3-14.5s-3.6-11.9-9.3-14.5l-115-53.1-53.1-115zM416 416l-56.5 21.2c-4.5 1.7-7.5 6-7.5 10.8s3 9.1 7.5 10.8L416 480 437.2 536.5c1.7 4.5 6 7.5 10.8 7.5s9.1-3 10.8-7.5L480 480 536.5 458.8c4.5-1.7 7.5-6 7.5-10.8s-3-9.1-7.5-10.8L480 416 458.8 359.5c-1.7-4.5-6-7.5-10.8-7.5s-9.1 3-10.8 7.5L416 416z"; 4916 exports.definition = { 4917 prefix, 4918 iconName, 4919 icon: [ 4920 width, 4921 height, 4922 aliases, 4923 unicode, 4924 svgPathData 4925 ] 4926 }; 4927 exports.faSparkles = exports.definition; 4928 exports.prefix = prefix; 4929 exports.iconName = iconName; 4930 exports.width = width; 4931 exports.height = height; 4932 exports.ligatures = aliases; 4933 exports.unicode = unicode; 4934 exports.svgPathData = svgPathData; 4935 exports.aliases = aliases; 4936})); 4937//#endregion 4938//#region client/components/editor/Utils/convertToVideoUtils.ts 4939var import_faArrowUpRightAndArrowDownLeftFromCenter = require_faArrowUpRightAndArrowDownLeftFromCenter(); 4940var import_faSparkles$1 = require_faSparkles(); 4941var GETTY_CONVERT_TO_VIDEO_DISABLED_TOOLTIP = "Getty assets cannot be converted into videos"; 4942var GETTY_LAYER_CONVERT_TO_VIDEO_DISABLED_TOOLTIP = "Media that contains Getty assets cannot be converted into videos"; 4943var VIDEO_GEN_BLOCKED_CONVERT_TO_VIDEO_DISABLED_TOOLTIP = "Video generation is disabled.\nContact your account owner to enable it."; 4944var UPLOAD_CONVERT_BLOCKED_CONVERT_TO_VIDEO_DISABLED_TOOLTIP = "Convert to video for uploaded media is disabled.\nAsk your account owner to enable this feature."; 4945var POSTER_IMAGE_CONVERT_TO_VIDEO_DISABLED_TOOLTIP = "Player poster image supports image generation only. Video generation isn't supported."; 4946var LOGO_CONVERT_TO_VIDEO_DISABLED_TOOLTIP = "Landing page logo supports image generation only. Video generation isn't supported."; 4947var getConvertToVideoGettyTooltip = (media) => { 4948 if (media?.externalLibrary === GqlClientExternalLibrary.GETTY) return GETTY_CONVERT_TO_VIDEO_DISABLED_TOOLTIP; 4949 if (media?.sourceMediaContributions?.some((c) => c.externalLibrary === GqlClientExternalLibrary.GETTY)) return GETTY_LAYER_CONVERT_TO_VIDEO_DISABLED_TOOLTIP; 4950}; 4951var getConvertToVideoAccountRestrictionTooltip = (isVideoGenBlocked, isUploadConvertBlocked, mediaOrigin) => { 4952 if (isVideoGenBlocked) return VIDEO_GEN_BLOCKED_CONVERT_TO_VIDEO_DISABLED_TOOLTIP; 4953 if (isUploadConvertBlocked && mediaOrigin === GqlClientMediaOrigin.USER) return UPLOAD_CONVERT_BLOCKED_CONVERT_TO_VIDEO_DISABLED_TOOLTIP; 4954}; 4955var resolveConvertToVideoDisabledTooltip = (isVideoGenBlocked, isUploadConvertBlocked, mediaOrigin, media, propTooltip, isConvertHandlerProvided = true) => { 4956 const accountRestrictionTooltip = getConvertToVideoAccountRestrictionTooltip(isVideoGenBlocked, isUploadConvertBlocked, mediaOrigin); 4957 if (accountRestrictionTooltip) return accountRestrictionTooltip; 4958 if (!(isConvertHandlerProvided || Boolean(propTooltip))) return; 4959 const gettyTooltip = getConvertToVideoGettyTooltip(media); 4960 if (gettyTooltip) return gettyTooltip; 4961 return propTooltip; 4962}; 4963//#endregion 4964//#region client/components/newNav/hooks/UseConvertToVideoAccountRestrictions/useConvertToVideoAccountRestrictions.ts 4965var useConvertToVideoAccountRestrictions = () => { 4966 const { accountFeatureFullData, loading } = useAccountFeatureFullData(); 4967 return { 4968 isVideoGenBlocked: loading || isAiFeatureBlocked(accountFeatureFullData, GqlClientFeatureTypeDefinition.USER_BLOCK_AI_VIDEO_GENERATION), 4969 isUploadConvertBlocked: loading || isAiFeatureBlocked(accountFeatureFullData, GqlClientFeatureTypeDefinition.USER_BLOCK_AI_VIDEO_GENERATION_ORIGIN_UPLOAD) 4970 }; 4971}; 4972//#endregion 4973//#region client/components/editor/Nooks/ShowDropHintFromMediaLibrary/showDropHintFromMediaLibrary.ts 4974var setShowDropHintFromMediaLibrary = (showDropHint) => { 4975 localEditorShowDropHintFromMediaLibrary(showDropHint); 4976}; 4977//#endregion 4978//#region client/components/editor/Hooks/UseShowDropHintFromMediaLibrary/useShowDropHintFromMediaLibrary.ts
4979var useShowDropHintFromMediaLibrary = () => { 4980 return { 4981 showDropHintFromMediaLibrary: useReactiveVar(localEditorShowDropHintFromMediaLibrary), 4982 setShowDropHintFromMediaLibrary 4983 }; 4984}; 4985//#endregion 4986//#region client/components/editor/Components/TruffleEditingWorkSpace/Components/Libraries/Components/TruffleMediaLibrary/AssetGrid/AssetPreview/ImageThumbnail.tsx 4987var ImageThumbnail = (props) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Box, { 4988 "aria-busy": props.loading, 4989 sx: containerSxProps$8(props.objectFit), 4990 children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("img", { 4991 src: props.url, 4992 alt: props.description, 4993 onLoad: props.onLoad, 4994 onContextMenu: disableRightClick, 4995 draggable: props.draggable 4996 }) 4997}); 4998var containerSxProps$8 = (objectFit) => ({ 4999 position: "relative", 5000 width: "100%", 5001 height: "100%", 5002 "& img": { 5003 display: "block", 5004 height: "100%", 5005 width: "100%", 5006 objectFit: objectFit || "contain" 5007 } 5008}); 5009//#endregion 5010//#region client/components/editor/Components/TruffleEditingWorkSpace/Components/Libraries/Components/TruffleMediaLibrary/AssetGrid/AssetPreview/DurationBadge.tsx 5011var DurationBadge = (props) => props.duration ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Box, { 5012 sx: badgeSxProps, 5013 children: durationToString(props.duration) 5014}) : null; 5015var badgeSxProps = { 5016 position: "absolute", 5017 bottom: "4px", 5018 left: "4px", 5019 height: "20px", 5020 lineHeight: "20px", 5021 fontSize: "12px", 5022 letterSpacing: "0.14px", 5023 borderRadius: "64px", 5024 padding: "0 6px", 5025 backgroundColor: (theme) => theme.palette.text.disabled, 5026 color: (theme) => theme.palette.white.main, 5027 opacity: 1 5028}; 5029//#endregion 5030//#region client/components/editor/Components/TruffleEditingWorkSpace/Components/Libraries/Components/TruffleMediaLibrary/AssetGrid/AssetPreview/VideoThumbnail.tsx 5031var VideoThumbnail = (props) => { 5032 const videoRef = (0, import_react.useRef)(null); 5033 const [liveDuration, setLiveDuration] = (0, import_react.useState)(props.duration); 5034 const [loading, setLoading] = (0, import_react.useState)(true); 5035 (0, import_react.useEffect)(() => { 5036 setLiveDuration(props.duration); 5037 }, [props.duration]); 5038 const handleMouseOver = () => { 5039 if (!loading && videoRef.current) safePlayMedia(videoRef.current); 5040 }; 5041 const handleMouseLeave = () => { 5042 if (!loading && videoRef.current) { 5043 const duration = videoRef.current.duration; 5044 duration && setLiveDuration(duration); 5045 videoRef.current.src = ""; 5046 videoRef.current.src = props.videoUrl; 5047 } 5048 }; 5049 const handleOnTimeUpdate = (e) => { 5050 const duration = e.currentTarget.duration; 5051 const currentTime = e.currentTarget.currentTime;
5052 duration && currentTime && setLiveDuration(duration - currentTime); 5053 }; 5054 const handleOnDurationChange = (e) => { 5055 const duration = e.currentTarget.duration; 5056 duration && setLiveDuration(duration); 5057 }; 5058 const handleLoadedData = (0, import_react.useCallback)(() => { 5059 setLoading(false); 5060 props.onLoadedData?.(); 5061 }, [props.onLoadedData]); 5062 (0, import_react.useEffect)(() => { 5063 let localRef = videoRef.current; 5064 return () => { 5065 if (localRef) { 5066 localRef.src = ""; 5067 localRef = null; 5068 } 5069 }; 5070 }, []); 5071 (0, import_react.useEffect)(() => { 5072 const image = new Image(); 5073 image.addEventListener("load", handleLoadedData); 5074 image.src = props.posterUrl; 5075 return () => { 5076 image.removeEventListener("load", handleLoadedData); 5077 image.src = ""; 5078 }; 5079 }, [props.posterUrl, handleLoadedData]); 5080 return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_material.Box, { 5081 "aria-busy": props.loading, 5082 sx: containerSxProps$7(props.objectFit), 5083 onMouseOver: handleMouseOver, 5084 onMouseLeave: handleMouseLeave, 5085 children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("video", { 5086 loop: true, 5087 muted: true, 5088 preload: "none", 5089 ref: videoRef, 5090 src: props.videoUrl, 5091 poster: props.posterUrl, 5092 onTimeUpdate: handleOnTimeUpdate, 5093 onDurationChange: handleOnDurationChange, 5094 onContextMenu: disableRightClick, 5095 draggable: props.draggable 5096 }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DurationBadge, { duration: liveDuration })] 5097 }); 5098}; 5099var containerSxProps$7 = (objectFit) => ({ 5100 position: "relative", 5101 width: "100%", 5102 height: "100%", 5103 "& video": { 5104 display: "block", 5105 height: "100%", 5106 width: "100%", 5107 objectFit: objectFit || "contain" 5108 } 5109}); 5110//#endregion 5111//#region client/components/editor/Components/TruffleEditingWorkSpace/Components/Libraries/Components/TruffleMediaLibrary/AssetGrid/AssetPreview/AssetThumbnail.tsx 5112var AssetThumbnail = (props) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_material.Box, { 5113 sx: (0, import_dist$3.combineSxProps)(containerSxProps$6, props.sx), 5114 "aria-busy": props.loading, 5115 children: [props.mediaType === EditorLibraryMediaType.Image && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ImageThumbnail, { 5116 url: props.thumbnailUrl, 5117 description: props.description, 5118 loading: props.loading, 5119 onLoad: props.onLoad, 5120 draggable: props.draggable 5121 }
5121), props.mediaType === EditorLibraryMediaType.Video && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(VideoThumbnail, { 5122 videoUrl: props.mediaUrl, 5123 posterUrl: props.thumbnailUrl, 5124 duration: props.duration, 5125 loading: props.loading, 5126 onLoadedData: props.onLoadedData, 5127 draggable: props.draggable 5128 })] 5129}); 5130var containerSxProps$6 = { 5131 position: "relative", 5132 height: "100%", 5133 width: "100%", 5134 border: (theme) => `1px solid ${theme.palette.grey[300]}` 5135}; 5136//#endregion 5137//#region client/images/svgAsComponents/square-check-solid.svg 5138var SvgSquareCheckSolid = (props) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { 5139 xmlns: "http://www.w3.org/2000/svg", 5140 fill: "none", 5141 viewBox: "0 0 21 21", 5142 ...props, 5143 children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", { 5144 clipPath: "url(#square-check-solid_svg__a)", 5145 children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { 5146 fill: "#fff", 5147 d: "M0 3a3 3 0 0 1 3-3h15a3 3 0 0 1 3 3v15a3 3 0 0 1-3 3H3a3 3 0 0 1-3-3z" 5148 }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { 5149 fill: "currentColor", 5150 d: "M18 0c1.64 0 3 1.36 3 3v15c0 1.688-1.36 3-3 3H3c-1.687 0-3-1.312-3-3V3c0-1.64 1.313-3 3-3zm-2.11 8.438a1.274 1.274 0 0 0 0-1.829 1.274 1.274 0 0 0-1.828 0L9 11.672 6.89 9.609a1.274 1.274 0 0 0-1.827 0 1.274 1.274 0 0 0 0 1.829l3 3c.234.28.562.374.937.374.328 0 .656-.093.89-.374z" 5151 })] 5152 }
5152), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("clipPath", { 5153 id: "square-check-solid_svg__a", 5154 children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { 5155 fill: "#fff", 5156 d: "M0 0h21v21H0z" 5157 }) 5158 }) })] 5159}); 5160//#endregion 5161//#region client/components/editor/Components/TruffleEditingWorkSpace/Components/Libraries/Components/TruffleMediaLibrary/AssetGrid/MultiSelectCheckMark.tsx 5162var MultiSelectCheckMark = (0, import_react.forwardRef)(function MultiSelectCheckMark(props, ref) { 5163 return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledSvgIcon, { 5164 ref, 5165 fontSize: "small", 5166 ...props, 5167 children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SvgSquareCheckSolid, {}) 5168 }); 5169}); 5170var StyledSvgIcon = (0, import_material.styled)(import_material.SvgIcon)(({ theme }) => ({ 5171 position: "absolute", 5172 top: "10px", 5173 left: "10px", 5174 color: theme.palette.primary.main 5175})); 5176//#endregion 5177//#region client/images/svgAsComponents/convert-image-to-video-icon.svg 5178var SvgConvertImageToVideoIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { 5179 xmlns: "http://www.w3.org/2000/svg", 5180 width: 14, 5181 height: 12, 5182 fill: "none", 5183 ...props, 5184 children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { 5185 fill: "currentColor", 5186 d: "M5.372 9.566c.039 0 .065.026.09.064l.324.747.761.317c.039.026.065.051.065.089s-.026.076-.065.101l-.761.305-.324.76c-.025.038-.051.051-.09.051a.12.12 0 0 1-.103-.051l-.31-.76-.775-.305a.12.12 0 0 1-.052-.101c0-.038.014-.063.052-.088l.775-.318.31-.747c.026-.038.065-.064.103-.064m-3.086-3.13c.077-.14.297-.14.374 0l.724 1.42 1.459.722a.2.2 0 0 1 .116.177.2.2 0 0 1-.116.177l-1.46.723-.723 1.433a.22.22 0 0 1-.18.1.21.21 0 0 1-.194-.1l-.723-1.433-1.46-.723C.04 8.907 0 8.832 0 8.755s.04-.152.104-.177l1.46-.722zM12.34 0C13.261 0 14 .792 14 1.724v7.678c0 .959-.74 1.724-1.659 1.724h-4.44c-.02-.643-.512-.958-.584-1.006l-.047-.03-.044-.03-.048-.02-.052-.021-.004-.002-.325-.135-.121-.284h3.273v-3.27H5.932v1.824l-.444-.22-1.112-.55-.533-1.047h.606V4.792H3.365v1a1.44 1.44 0 0 0-1.483-.041V1.724C1.882.794 2.596 0 3.54 0zm-.908 9.598h.908c.074 0 .175-.08.175-.196V7.863h-1.083zm0-3.263h1.083V4.792h-1.083zm-5.5-1.536h4.016V1.53H5.932zM3.54 1.53c-.081 0-.175.088-.175.195v1.54H4.45V1.527zm7.893 1.734h1.083v-1.54c0-.038-.02-.09-.062-.134-.043-.045-.088-.06-.
5186113-.06h-.908z" 5187 }) 5188}); 5189//#endregion 5190//#region client/components/editor/Components/TruffleEditingWorkSpace/Components/Libraries/Components/TruffleMediaLibrary/AssetGrid/AssetCard.tsx 5191var gettyIcon = new URL("data:image/svg+xml,%3csvg%20width='24'%20height='11'%20viewBox='0%200%2024%2011'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M2.90542%203.57286C2.33871%203.57286%201.94325%203.9792%201.94325%204.49237C1.94325%205.0053%202.33871%205.4114%202.90542%205.4114C3.40797%205.4114%203.81416%205.0053%203.81416%204.49237C3.81416%203.9792%203.40797%203.57286%202.90542%203.57286ZM1.71881%208.78896C1.71881%209.21652%202.08206%209.40896%203.19402%209.40896C4.04909%209.40896%204.33794%208.9814%204.33794%208.78896C4.33794%208.53237%203.94248%208.14774%202.65951%208.14774C1.93252%208.14774%201.71881%208.55384%201.71881%208.78896ZM5.58871%203.48725C5.27888%203.48725%204.93661%203.48725%204.7334%203.61579C4.90441%203.85091%205.03298%204.1714%205.03298%204.59896C5.03298%205.64652%204.32721%206.39457%202.93738%206.39457C2.36018%206.39457%201.90032%206.41603%201.90032%206.73676C1.90032%207.63457%205.55675%206.41603%205.55675%208.6392C5.55675%209.43042%204.75486%2010.2853%202.98032%2010.2853C1.48339%2010.2853%200.5%209.83652%200.5%208.95993C0.5%208.2653%201.02378%207.93384%201.50486%207.93384V7.91262C1.24822%207.75237%200.681748%207.6131%200.681748%207.01457C0.681748%206.48018%201.30164%206.07408%201.5478%205.9992C1.08794%205.62506%200.724441%205.19749%200.724441%204.52408C0.724441%203.55164%201.47266%202.58969%202.91616%202.58969C3.38651%202.58969%203.94248%202.78213%204.28451%203.08115C4.54116%202.7392%204.95808%202.56823%205.58871%202.58969V3.48725Z'%20fill='white'/%3e%3cpath%20d='M5.58871%203.73725C5.72678%203.73725%205.83871%203.62532%205.83871%203.48725V2.58969C5.83871%202.45493%205.7319%202.34442%205.59721%202.33983C5.02541%202.32037%204.57378%202.4481%204.25299%202.74418C3.86913%202.49021%203.35978%202.339
519169%202.91616%202.33969C1.33812%202.33969%200.474441%203.41006%200.474441%204.52408C0.474441%205.15272%200.752249%205.59306%201.11015%205.94479C1.02199%206.00412%200.932569%206.0746%200.849652%206.15391C0.641466%206.35307%200.431748%206.64925%200.431748%207.01457C0.431748%207.41221%200.628041%207.66445%200.847513%207.82829C0.855753%207.83444%200.864028%207.84047%200.872328%207.84639C0.796015%207.8888%200.72328%207.93974%200.656017%207.99947C0.409347%208.21853%200.25%208.54412%200.25%208.95993C0.25%209.5148%200.570773%209.92078%201.06484%2010.1738C1.54782%2010.4212%202.213%2010.5353%202.98032%2010.5353C4.8182%2010.5353%205.80675%209.63291%205.80675%208.6392C5.80675%207.99833%205.5347%207.57656%205.11712%207.31779C4.72186%207.07285%204.21463%206.98534%203.75181%206.94206C3.54274%206.9225%203.33381%206.91141%203.14075%206.90116C3.11714%206.89991%203.09376%206.89866%203.07066%206.89742C2.85506%206.88583%202.6651%206.87422%202.50542%206.85244C2.34062%206.82996%202.23764%206.80003%202.18116%206.76786C2.14612%206.7479%202.14866%206.7414%202.14995%206.73809C2.15015%206.73759%202.15032%206.73716%202.15032%206.73676C2.15032%206.73485%202.15038%206.73329%202.15046%206.73205C2.16049%206.72389%202.19083%206.70547%202.26141%206.68833C2.41412%206.65123%202.64211%206.64457%202.93738%206.64457C3.6757%206.64457%204.26604%206.44549%204.67442%206.07468C5.08527%205.70163%205.28298%205.18087%205.28298%204.59896C5.28298%204.26814%205.21407%203.9891%205.10559%203.75699C5.11912%203.75516%205.13317%203.75346%205.14775%203.75189C5.28173%203.73751%205.43092%203.73725%205.58871%203.73725ZM2.19325%204.49237C2.19325%204.12282%202.47117%203.82286%202.90542%203.82286C3.26796%203.82286%203.56416%204.11532%203.56416%204.49237C3.56416%204.86905%203.26809%205.1614%202.90542%205.1614C2.47103%205.1614%202.19325%204.86155%202.19325%204.49237ZM3.19402%209.15896C2.64095%209.15896%202.31848%209.10929%202.14048%209.03063C2.0576%208.994%202.02045%208.95715%202.00179%208.9288C1.98345%208.90091%201.96881%208.85975%201.96881%208.78896C1.96881%208.74142%201.99282%208.64852%202.08452%208.56533C2.17294%208.48512%202.34333%208.39774%202.65951%208.39774C3.28045%208.39774%203.65731%208.4915%203.869%208.59621C4.06679%208.69405%204.0859%208.77926%204.08774%208.78853C4.0876%208.78883%204.08737%208.78956%204.08702%208.79069C4.08253%208.80489%204.05808%208.8823%203.93908%208.96931C3.8112%209.06281%203.57993%209.15896%203.19402%209.15896Z'%20stroke='black'%20stroke-opacity='0.38'%20stroke-width='0.5'%20stroke-linejoin='round'/%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M9.19418%204.79162C9.17295%204.02211%208.76652%203.57308%208.12516%203.57308C7.48355%203.57308%207.07736%204.02211%207.05589%204.79162H9.19418ZM7.05589%205.68967C7.07736%206.84382%207.59064%207.29284%208.21078%207.29284C8.83092%207.29284%209.11928%207.01479%209.45082%206.63016L10.413%207.22869C9.89995%208.01943%209.15149%208.36162%208.08222%208.36162C6.63897%208.36162%205.73047%207.23943%205.73047%205.47577C5.73047%203.71211%206.63897%202.58991%208.14662%202.58991C9.60061%202.57918%2010.413%203.80845%2010.413%205.1443V5.68967H7.05589Z'%20fill='white'/%3e%3cpath%20d='M7.60283%206.76637C7.46866%206.60132%207.35878%206.33838%207.32011%205.93967L8.14662%202.58991V2.33991C8.14632%202.33991%208.14601%202.33991%208.1457%202.33991C7.32505%202.34014%206.64804%202.64852%206.18076%203.21186C5.7179%203.76985%205.48047%204.55363%205.48047%205.47577C5.48047%206.39797%205.7179%207.18057%206.17118%207.73782C6.62899%208.30064%207.28991%208.61162%208.08222%208.61162C8.64278%208.61162%209.13658%208.522%209.5642%208.31715C9.99436%208.11107%2010.3435%207.79505%2010.6227%207.36477C10.6593%207.30845%2010.6716%207.23981%2010.657%207.17429C10.6424%207.10877%2010.602%207.05187%2010.545%207.01642L9.58287%206.41788C9.47828%206.35281%209.34188%206.37363%209.26146%206.46693C9.0966%206.65819%208.96321%206.79729%208.80799%206.89283C8.66022%206.98378%208.47936%207.04284%208.21078%207.04284C7.96576%207.04284%207.75779%206.957%207.60283%206.76637ZM8.12516%203.82308C8.3836%203.82308%208.57388%203.91128%208.70499%204.05945C8.80352%204.17081%208.88063%204.3299%208.9188%204.54162H7.33134C7.36956%204.3299%207.44667%204.1708%207.5452%204.05945C7.67629%203.91129%207.86657%203.82308%208.12516%203.82308Z'%20stroke='black'%20stroke-opacity='0.38'%20stroke-width='0.5'%20stroke-linejoin='round'/%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M18.5342%209.15117C18.7374%209.19409%2018.8977%209.19409%2019.0902%209.19409C19.5498%209.19409%2019.8064%209.06556%2019.9667%208.7558C20.095%208.48848%2020.1806%208.32824%2020.1806%208.10361C20.1806%207.90068%2020.0738%207.66556%2020.0096%207.44092L18.5234%202.69531H19.8601L20.7793%206.1158H20.8008L21.752%202.69531H23.0779L21.3246%208.26409C20.7364%209.85678%2020.2663%2010.2843%2019.1758%2010.2843C18.8547%2010.2843%2018.6945%2010.2629%2018.5342%2010.2414V9.15117Z'%20fill='white'/%3e%3cpath%20d='M18.5858%208.90656C18.5121%208.89099%2018.4353%208.90951%2018.3767%208.95698C18.3182%209.00445%2018.2842%209.0758%2018.2842%209.15117V10.2414C18.2842%2010.3667%2018.3769%2010.4726%2018.501%2010.4892C18.6673%2010.5115%2018.8396%2010.5343%2019.1758%2010.5343C19.7566%2010.5343%2020.2186%2010.4192%2020.6092%2010.0541C20.9829%209.70484%2021.2638%209.15023%2021.5591%208.3507L21.5594%208.3508L21.563%208.33917L23.3163%202.77039C23.3403%202.69444%2023.3266%202.61165%2023.2795%202.54744C23.2324%202.48324%2023.1575%202.44531%2023.0779%202.44531H21.752C21.6397%202.44531%2021.5412%202.52016%2021.5111%202.62833L20.794%205.20713L20.1015%202.63043C20.0722%202.52122%2019.9732%202.44531%2019.8601%202.44531H18.5234C18.4439%202.44531%2018.3691%202.48318%2018.322%202.54729C18.2749%202.6114%2018.2611%202.69411%2018.2849%202.77003L19.7701%207.51273C19.789%207.57816%2019.8159%207.65873%2019.84%207.73101C19.8556%207.77768%2019.87%207.82089%2019.8804%2
519107.85432C19.9136%207.96176%2019.9306%208.04147%2019.9306%208.10361C19.9306%208.25351%2019.8818%208.35524%2019.756%208.617C19.7518%208.62582%2019.7475%208.63482%2019.743%208.64401C19.6837%208.75762%2019.6153%208.82428%2019.5288%208.86752C19.4353%208.9143%2019.2996%208.94409%2019.0902%208.94409C18.8971%208.94409%2018.7606%208.94349%2018.5858%208.90656Z'%20stroke='black'%20stroke-opacity='0.38'%20stroke-width='0.5'%20stroke-linejoin='round'/%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M11.5028%202.71049V1H12.9609V2.71049H14.1605V3.77951H12.9609V6.92195C12.9609%207.22122%2013.1256%207.30683%2013.4901%207.30683C13.7135%207.30683%2013.9487%207.24268%2014.1605%207.19976V8.29C13.7606%208.33293%2013.4078%208.37561%2013.008%208.37561C11.926%208.37561%2011.5028%207.8839%2011.5028%207.09293V3.77951H10.6562V2.71049H11.5028Z'%20fill='white'/%3e%3cpath%20d='M13.2109%206.92195V4.02951H14.1605C14.2985%204.02951%2014.4105%203.91758%2014.4105%203.77951V2.71049C14.4105%202.57242%2014.2985%202.46049%2014.1605%202.46049H13.2109V1C13.2109%200.861929%2013.099%200.75%2012.9609%200.75H11.5028C11.3647%200.75%2011.2528%200.861929%2011.2528%201V2.46049H10.6562C10.5182%202.46049%2010.4062%202.57242%2010.4062%202.71049V3.77951C10.4062%203.91758%2010.5182%204.02951%2010.6562%204.02951H11.2528V7.09293C11.2528%207.53158%2011.371%207.93022%2011.6804%208.21486C11.9857%208.49574%2012.4342%208.62561%2013.008%208.62561C13.3852%208.62561%2013.7226%208.58897%2014.0766%208.55053C14.1133%208.54655%2014.1501%208.54255%2014.1871%208.53857C14.3142%208.52494%2014.4105%208.41774%2014.4105%208.29V7.19976C14.4105%207.12474%2014.3768%207.0537%2014.3187%207.00621C14.2606%206.95873%2014.1843%206.93984%2014.1108%206.95474C14.0577%206.96549%2014.0068%206.97657%2013.9576%206.98727C13.7875%207.02424%2013.6376%207.05683%2013.4901%207.05683C13.4072%207.05683%2013.3458%207.05184%2013.3004%207.04319C13.255%207.03454%2013.2355%207.02405%2013.2291%207.0197L13.2288%207.01949C13.2261%207.01765%2013.2252%207.01702%2013.2227%207.0112C13.2185%207.00127%2013.2109%206.97546%2013.2109%206.92195Z'%20stroke='black'%20stroke-opacity='0.38'%20stroke-width='0.5'%20stroke-linejoin='round'/%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M15.3172%202.71049V1H16.7754V2.71049H17.9749V3.77951H16.7754V6.92195C16.7754%207.22122%2016.94%207.30683%2017.3045%207.30683C17.528%207.30683%2017.7632%207.24268%2017.9749%207.19976V8.29C17.5751%208.33293%2017.2223%208.37561%2016.8225%208.37561C15.7405%208.37561%2015.3172%207.8839%2015.3172%207.09293V3.77951H14.4707V2.71049H15.3172Z'%20fill='white'/%3e%3cpath%20d='M17.0254%206.92195V4.02951H17.9749C18.113%204.02951%2018.2249%203.91758%2018.2249%203.77951V2.71049C18.2249%202.57242%2018.113%202.46049%2017.9749%202.46049H17.0254V1C17.0254%200.861929%2016.9134%200.75%2016.7754%200.75H15.3172C15.1792%200.75%2015.0672%200.861929%2015.0672%201V2.46049H14.4707C14.3326%202.46049%2014.2207%202.57242%2014.2207%202.71049V3.77951C14.2207%203.91758%2014.3326%204.02951%2014.4707%204.02951H15.0672V7.09293C15.0672%207.53158%2015.1855%207.93022%2015.4948%208.21486C15.8001%208.49574%2016.2486%208.62561%2016.8225%208.62561C17.1996%208.62561%2017.537%208.58897%2017.8911%208.55053C17.9277%208.54655%2017.9645%208.54255%2018.0016%208.53857C18.1286%208.52494%2018.2249%208.41774%2018.2249%208.29V7.19976C18.2249%207.12474%2018.1912%207.0537%2018.1332%207.00621C18.0751%206.95873%2017.9988%206.93984%2017.9252%206.95474C17.8722%206.96549%2017.8213%206.97657%2017.772%206.98727C17.602%207.02424%2017.4521%207.05683%2017.3045%207.05683C17.2217%207.05683%2017.1603%207.05184%2017.1148%207.04319C17.0694%207.03454%2017.05%207.02405%2017.0436%207.0197L17.0433%207.01949C17.0405%207.01765%2017.0396%207.01702%2017.0371%207.0112C17.033%207.00127%2017.0254%206.97546%2017.0254%206.92195Z'%20stroke='black'%20stroke-opacity='0.38'%20stroke-width='0.5'%20stroke-linejoin='round'/%3e%3c/svg%3e", "" + import.meta.url).href; 5192var acquiaIcon$1 = new URL("data:image/svg+xml,%3csvg%20width='13'%20height='16'%20viewBox='0%200%2013%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M6.29954%2015.2841C6.03716%2015.2457%205.77183%2015.2221%205.51326%2015.1669C3.13882%2014.6607%201.65105%2013.1843%201.006
519251%2010.8858C0.429035%208.8273%200.968124%206.97466%202.33989%205.37637C2.83975%204.79426%203.43663%204.29145%204.01916%203.78652C5.0134%202.92474%205.75285%201.87947%206.33708%200.713129C6.37926%200.631717%206.40794%200.544399%206.45603%200.467206C6.50224%200.402696%206.55344%200.341908%206.60915%200.2854C6.65894%200.339854%206.70422%200.398258%206.74456%200.460035C6.98246%200.889872%207.20223%201.32983%207.45364%201.75123C8.05853%202.7674%208.8988%203.56507%209.8015%204.31718C10.9164%205.24519%2011.7723%206.37187%2012.1675%207.79974C13.0006%2010.809%2011.277%2014.0773%208.36646%2014.9889C7.96236%2015.1154%207.53126%2015.1555%207.11281%2015.2369C7.05249%2015.2487%206.99385%2015.2689%206.93438%2015.2854L6.29954%2015.2841ZM8.36646%206.80213C8.21672%207.03076%208.10451%207.24462%207.95223%207.4239C7.79447%207.61034%207.59748%207.76136%207.41905%207.93009C7.3832%207.96341%207.3562%208.00601%207.32119%208.04018C7.23429%208.12454%207.22459%208.20469%207.29166%208.31774C7.68536%208.98169%208.07414%209.64915%208.458%2010.3201C8.53519%2010.4568%208.62673%2010.4657%208.75328%2010.4315C9.29869%2010.283%209.74414%209.71439%209.77619%209.1424C9.80994%208.53624%209.50117%208.11316%209.07934%207.72466C8.85114%207.51375%208.6765%207.24505%208.48162%206.99955C8.43862%206.93654%208.40014%206.87057%208.36646%206.80213ZM8.26143%2011.7771C8.22726%2011.7071%208.17411%2011.5793%208.10536%2011.4603C7.62954%2010.6403%207.15147%209.82111%206.67116%209.00278C6.40879%208.55284%206.1467%208.10402%205.88488%207.65632C5.84785%207.58315%205.78672%207.52499%205.7118%207.49164C5.63689%207.45829%205.55276%207.4518%205.47361%207.47325C5.39928%207.48542%205.33183%207.52398%205.28364%207.58185C5.23544%207.63973%205.20974%207.71305%205.21123%207.78835C5.21123%207.89212%205.2627%208.00517%205.31669%208.09924C5.87912%209.07224%206.44394%2010.0438%207.01115%2011.014C7.20561%2011.3477%207.39838%2011.6826%207.59706%2012.0137C7.63485%2012.0867%207.69794%2012.1433%207.77451%2012.1731C7.85108%2012.2028%207.93586%2012.2036%208.01298%2012.1753C8.17116%2012.1272%208.25299%2012.0125%208.26017%2011.7771H8.26143ZM3.72347%207.4665C3.41975%207.46439%203.27507%207.75292%203.44295%208.04229C4.19914%209.34713%204.95842%2010.6506%205.7208%2011.9526C5.85831%2012.1884%206.05066%2012.2525%206.24554%2012.1416C6.44042%2012.0306%206.47248%2011.8273%206.33834%2011.5932C6.16413%2011.2891%205.98486%2010.9875%205.80811%2010.6842C5.23387%209.70132%204.66076%208.71945%204.08876%207.73858C4.00524%207.59516%203.91624%207.46186%203.72347%207.4665Z'%20fill='white'/%3e%3c/svg%3e", "" + import.meta.url).href; 5193var dropHintGif = new URL("/client/images/drag_drop_hint.ZrEHoN3X.gif", "" + import.meta.url).href; 5194var AssetCard = (props) => { 5195 const [loading, setLoading] = (0, import_react.useState)(true); 5196 const isAiVideoGenEnabled = isFeatureEnabled(featureFlagConst._EDITOR_GENERATE_VIDEO_WITH_AI); 5197 const { setShowDropHintFromMediaLibrary } = useShowDropHintFromMediaLibrary(); 5198 const isYourLibraryAsset = props.asset.type === ItemType.YOUR_LIBRARY; 5199 const { isVideoGenBlocked, isUploadConvertBlocked } = useConvertToVideoAccountRestrictions(); 5200 const convertToVideoDisabledTooltip = resolveConvertToVideoDisabledTooltip(isVideoGenBlocked, isUploadConvertBlocked, isYourLibraryAsset ? props.asset.origin : void 0, isYourLibraryAsset ? props.asset : void 0, props.convertToVideoDisabledTooltip, !!props.onConvertImageToVideoClick); 5201 const isConvertToVideoAvailable = isYourLibraryAsset && props.asset.mediaType === EditorLibraryMediaType.Image && (!!props.onConvertImageToVideoClick || !!convertToVideoDisabledTooltip); 5202 const [showDropHint, setShowDropHint] = (0, import_react.useState)(false); 5203 const previewAvailable = !!props.onPreview; 5204 const handleSingleClick = (e) => { 5205 if (e.detail > 1) return; 5206 if (props.enableDragDrop === false) props.onClick(); 5207 else { 5208 setShowDropHint(true); 5209 setShowDropHintFromMediaLibrary(true); 5210 setTimeout(() => { 5211 setShowDropHint(false); 5212 setShowDropHintFromMediaLibrary(false); 5213 }, 3e3); 5214 } 5215 }; 5216 function onPreview(trigger) { 5217 PendoService.getInstance().trackEvent("Media Lib Asset Preview", { 5218 trigger, 5219 assetType: props.asset.mediaType 5220 }); 5221 props.onPreview(); 5222 } 5223 function handleDoubleClick(event) { 5224 if (previewAvailable) { 5225 onPreview("double-click"); 5226 event.stopPropagation(); 5227 event.preventDefault(); 5228 } 5229 } 5230 const handleThreeDotsMenuClick = (0, import_react.useCallback)((e) => { 5231 props.setThreeDotsMenuAnchor(e.currentTarget); 5232 props.setThreeDotsMenuAssetId(props.asset.id); 5233 e.stopPropagation(); 5234 }, [ 5235 props.asset, 5236 props.setThreeDotsMenuAnchor, 5237 props.setThreeDotsMenuAssetId 5238 ]); 5239 const thumbnail = props.activeLibraryView === GqlClientLibraryViewType.LIST ? /* @__P
5239URE__ */ (0, import_jsx_runtime.jsxs)(import_material.Box, { 5240 sx: ThumbnailContainer, 5241 children: [ 5242 /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AssetThumbnail, { 5243 mediaType: props.asset.mediaType, 5244 mediaUrl: props.asset.mediaUrl, 5245 thumbnailUrl: props.asset.thumbnailUrl, 5246 description: props.asset.name, 5247 duration: props.asset.duration, 5248 sx: { 5249 "&[aria-busy=true]": { 5250 border: "none", 5251 opacity: 0 5252 }, 5253 position: "relative", 5254 "[aria-selected=true] &": { 5255 outline: (theme) => `2px solid ${theme.palette.primary.main}`, 5256 outlineOffset: "-1px" 5257 } 5258 }, 5259 loading, 5260 onLoad: () => setLoading(false), 5261 onLoadedData: () => setLoading(false), 5262 draggable: props.enableDragDrop 5263 }), 5264 previewAvailable && !showDropHint && !props.multiSelectEnabled && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Tooltip, { 5265 title: "Preview", 5266 children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dist$3.ThumbnailActionsIconButton, { 5267 onClick: () => onPreview("button"), 5268 "data-tracking-id": props.asset.type === ItemType.DAM_ASSET ? "tracking-id-media-lib-acquia-asset-preview-btn" : "tracking-id-media-lib-asset-preview-btn", 5269 sx: previewButtonSxProps, 5270 children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FontAwesomeIcon, { icon: import_faArrowUpRightAndArrowDownLeftFromCenter.faArrowUpRightAndArrowDownLeftFromCenter }) 5271 }) 5272 }), 5273 isConvertToVideoAvailable && !showDropHint && !props.multiSelectEnabled && /* @__P
5273URE__ */ (0, import_jsx_runtime.jsx)(import_material.Tooltip, { 5274 title: convertToVideoDisabledTooltip ?? "Convert to video", 5275 children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Box, { 5276 component: "span", 5277 sx: convertToVideoButtonSxProps, 5278 onClick: (e) => e.stopPropagation(), 5279 children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dist$3.ThumbnailActionsIconButton, { 5280 disabled: !!convertToVideoDisabledTooltip, 5281 onClick: (e) => { 5282 e.stopPropagation(); 5283 props.onConvertImageToVideoClick?.(props.asset.mediaUrl, props.asset.id); 5284 }, 5285 "data-tracking-id": "tracking-id-media-lib-image-convert-to-video-btn", 5286 sx: { opacity: 0 }, 5287 children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SvgConvertImageToVideoIcon, {}) 5288 }) 5289 }) 5290 }) 5291 ] 5292 }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AssetThumbnail, { 5293 mediaType: props.asset.mediaType, 5294 mediaUrl: props.asset.mediaUrl, 5295 thumbnailUrl: props.asset.thumbnailUrl, 5296 description: props.asset.name, 5297 duration: props.asset.duration, 5298 sx: { "&[aria-busy=true]": { 5299 border: "none", 5300 opacity: 0 5301 } }, 5302 loading, 5303 onLoad: () => setLoading(false), 5304 onLoadedData: () => setLoading(false), 5305 draggable: props.enableDragDrop 5306 }); 5307 const theme = (0, import_material.useTheme)(); 5308 let mediaOriginBadge = void 0; 5309 if (props.asset.type === ItemType.YOUR_LIBRARY) { 5310 if (props.asset.origin === GqlClientMediaOrigin.EXTERNAL) { 5311 if (props.asset.externalLibrary === GqlClientExternalLibrary.GETTY) mediaOriginBadge = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Tooltip, { 5312 title: "Getty images", 5313 children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Icon, { 5314 component: "img", 5315 src: gettyIcon, 5316 alt: "Getty", 5317 sx: { 5318 position: "absolute", 5319 bottom: "6px", 5320 right: "10px" 5321 } 5322 }) 5323 }); 5324 else if (props.asset.externalLibrary === GqlClientExternalLibrary.ACQUIA) mediaOriginBadge = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Tooltip, { 5325 title: "Imported from Acquia DAM", 5326 children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Box, { 5327 sx: mediaOriginBadgeSxProps, 5328 children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Icon, { 5329 component: "img", 5330 alt: "acquia", 5331 sx: { fontSize: "12px" }, 5332 src: acquiaIcon$1 5333 }) 5334 }) 5335 }); 5336 } else if (props.asset.origin === GqlClientMediaOrigin.AI_GENERATED) mediaOriginBadge = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Tooltip, { 5337 title: isAiVideoGenEnabled ? "AI Media Generator" : "AI Image Generator", 5338 children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Box, { 5339 sx: mediaOriginBadgeSxProps, 5340 children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FontAwesomeIcon, { 5341 color: theme.palette.primary.contrastText, 5342 fontSize: "12px", 5343 icon: import_faSparkles$1.faSparkles 5344 }) 5345 }) 5346 }); 5347 } 5348 return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_material.ButtonBase, { 5349 sx: (0, import_dist$3.combineSxProps)(cardSxProps, props.activeLibraryView === GqlClientLibraryViewType.LIST ? ListItemContainer : gridCardSxProps), 5350 "aria-busy": props.loading || loading, 5351 "aria-selected": props.selected || props.multiSelected, 5352 "data-testid": `truffle-media-library-asset-card-${props.asset.id}`, 5353 onDoubleClick: props.multiSelectEnabled ? void 0 : handleDoubleClick, 5354 onClick: props.multiSelectEnabled ? handleSingleClick : (0, import_lodash.debounce)(handleSingleClick, 300), 5355 disableRipple: true, 5356 disabled: loading || props.loading, 5357 children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [(props.loading || loading) && props.activeLibraryView === GqlClientLibraryViewType.GRID ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Skeleton, { 5358 sx: skeletonSxProps, 5359 variant: "rectangular", 5360 height: "100%" 5361 }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {}), !props.loading && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Tooltip, { 5362 ...virtualizedItemTooltipProps, 5363 title: props.asset.name, 5364 children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_material.Box, { 5365 sx: [{ 5366 width: "100%", 5367 height: "100%" 5368 }, props.activeLibraryView === GqlClientLibraryViewType.LIST && { 5369 border: "none", 5370 borderBottom: (theme) => `1px solid ${theme.palette.divider}`, 5371 display: "flex", 5372 flexDirection: "row",
5373 alignItems: "center" 5374 }], 5375 children: [ 5376 /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_material.Box, { 5377 sx: { 5378 height: "100%", 5379 cursor: "inherit", 5380 position: "relative", 5381 display: "flex", 5382 alignItems: "center", 5383 ...props.activeLibraryView === GqlClientLibraryViewType.GRID && { width: "100%" } 5384 }, 5385 children: [ 5386 thumbnail, 5387 mediaOriginBadge, 5388 /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Fade, { 5389 in: showDropHint, 5390 timeout: 500, 5391 children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_material.Box, { 5392 sx: (0, import_dist$3.combineSxProps)(dropHintSxProps, props.activeLibraryView === GqlClientLibraryViewType.LIST ? { 5393 width: "120px", 5394 height: "68px" 5395 } : { 5396 width: "100%", 5397 height: "100%" 5398 }), 5399 children: [props.activeLibraryView === GqlClientLibraryViewType.GRID ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Box, { 5400 sx: { width: "105px" }, 5401 component: "img", 5402 src: dropHintGif 5403 }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Typography, { 5404 variant: "tooltip", 5405 children: "Drag & Drop media" 5406 })] 5407 }) 5408 }) 5409 ] 5410 }), 5411 props.activeLibraryView === GqlClientLibraryViewType.LIST && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_material.Box, { 5412 sx: { 5413 display: "flex", 5414 flexDirection: "column", 5415 padding: "6px 32px 6px 12px", 5416 justifyContent: "center", 5417 overflow: "hidden" 5418 }, 5419 children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Typography, { 5420 variant: "h6", 5421 sx: { 5422 width: "100%", 5423 textWrap: "nowrap", 5424 textOverflow: "ellipsis", 5425 overflow: "hidden", 5426 alignSelf: "flex-start", 5427 textAlign: "start" 5428 }, 5429 children: props.asset.name 5430 }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Typography, { 5431 variant: "body1", 5432 sx: { 5433 width: "100%", 5434 alignSelf: "flex-start", 5435 textAlign: "start", 5436 color: (theme) => theme.palette.text.secondary 5437 }, 5438 children: TimeUtils.getDesignSystemReadableTimeDate(props.asset.createdAt) 5439 })] 5440 }), 5441 props.activeLibraryView === GqlClientLibraryViewType.LIST && !props.multiSelectEnabled && /* @__P
5441URE__ */ (0, import_jsx_runtime.jsx)(import_material.Box, { 5442 sx: { 5443 position: "absolute", 5444 right: "4px" 5445 }, 5446 children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Tooltip, { 5447 title: "Options", 5448 children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dist$3.TruffleIconButton, { 5449 onClick: handleThreeDotsMenuClick, 5450 size: "small", 5451 sx: { opacity: 0 }, 5452 children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FontAwesomeIcon, { icon: import_faEllipsisV.faEllipsisV }) 5453 }) 5454 }) 5455 }) 5456 ] 5457 }) 5458 })] }), !props.loading && !loading ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [props.multiSelectEnabled && props.multiSelected && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MultiSelectCheckMark, {}), props.activeLibraryView === GqlClientLibraryViewType.GRID && !showDropHint && !props.multiSelectEnabled && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_material.Box, { 5459 sx: extraButtonContainerSxProps$1, 5460 children: [previewAvailable && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Tooltip, { 5461 title: "Preview", 5462 children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dist$3.ThumbnailActionsIconButton, { 5463 onClick: () => onPreview("button"), 5464 "data-tracking-id": props.asset.type === ItemType.DAM_ASSET ? "tracking-id-media-lib-acquia-asset-preview-btn" : "tracking-id-media-lib-asset-preview-btn", 5465 sx: { opacity: 0 }, 5466 children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FontAwesomeIcon, { icon: import_faArrowUpRightAndArrowDownLeftFromCenter.faArrowUpRightAndArrowDownLeftFromCenter }) 5467 }) 5468 }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Tooltip, { 5469 title: "Options", 5470 children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dist$3.ThumbnailActionsIconButton, { 5471 "data-tracking-id": props.asset.type === ItemType.DAM_ASSET ? "tracking-id-media-lib-acquia-media-3dots-menu" : "tracking-id-media-lib-media-3dots-menu", 5472 onClick: handleThreeDotsMenuClick, 5473 sx: { opacity: 0 }, 5474 children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FontAwesomeIcon, { icon: import_faEllipsisV.faEllipsisV }) 5475 }) 5476 })] 5477 }), isConvertToVideoAvailable && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Tooltip, { 5478 title: convertToVideoDisabledTooltip ?? "Convert to video", 5479 children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Box, { 5480 component: "span", 5481 sx: convertToVideoButtonSxProps, 5482 onClick: (e) => e.stopPropagation(), 5483 children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dist$3.ThumbnailActionsIconButton, { 5484 disabled: !!convertToVideoDisabledTooltip, 5485 onClick: (e) => { 5486 e.stopPropagation(); 5487 props.onConvertImageToVideoClick?.(props.asset.mediaUrl, props.asset.id); 5488 }, 5489 "data-tracking-id": "tracking-id-media-lib-image-convert-to-video-btn", 5490 sx: { opacity: 0 }, 5491 children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SvgConvertImageToVideoIcon, {}) 5492 }) 5493 }) 5494 })] })] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {})] 5495 }); 5496}; 5497var dropHintSxProps = { 5498 position: "absolute", 5499 display: "flex", 5500 flexDirection: "column", 5501 backgroundColor: (theme) => theme.palette.action.active, 5502 padding: "8px", 5503 gap: "4px", 5504 alignItems: "center", 5505 justifyContent: "center", 5506 textAlign: "center", 5507 color: (theme) => theme.palette.common.white, 5508 pointerEvents: "none" 5509}; 5510var extraButtonContainerSxProps$1 = { 5511 position: "absolute", 5512 top: "4px", 5513 right: "4px", 5514 display: "flex", 5515 flexDirection: "row", 5516 gap: "4px" 5517}; 5518var ListItemContainer = { 5519 "&:hover": { backgroundColor: (theme) => theme.palette.action.hover }, 5520 "&:hover,div:focus-visible>&": { outline: "none" }, 5521 "&[aria-selected=true]": { backgroundColor: (theme) => theme.palette.action.selected }, 5522 paddingLeft: "8px" 5523}; 5524var ThumbnailContainer = { 5525 display: "flex", 5526 width: "120px", 5527 height: "68px", 5528 justifyContent: "center", 5529 alignItems: "center", 5530 position: "relative" 5531}; 5532var mediaOriginBadgeSxProps = {
5533 display: "flex", 5534 padding: "4px", 5535 flexDirection: "column", 5536 justifyContent: "center", 5537 alignItems: "center", 5538 position: "absolute", 5539 bottom: "4.42px", 5540 right: "3.891px", 5541 borderRadius: "11px", 5542 backgroundColor: (0, import_material.alpha)("#000000", .5) 5543}; 5544var previewButtonSxProps = { 5545 position: "absolute", 5546 top: "4px", 5547 right: "4px", 5548 opacity: 0 5549}; 5550var convertToVideoButtonSxProps = { 5551 display: "inline-flex", 5552 position: "absolute", 5553 top: "4px", 5554 left: "4px" 5555}; 5556//#endregion 5557//#region client/images/svg/truffle/empty-recordings-folder.svg 5558var import_faFolderArrowDown = (/* @__PURE__ */ __commonJSMin(((exports) => { 5559 Object.defineProperty(exports, "__esModule", { value: true }); 5560 var prefix = "far"; 5561 var iconName = "folder-arrow-down"; 5562 var width = 512; 5563 var height = 512; 5564 var aliases = ["folder-download"]; 5565 var unicode = "e053"; 5566 var svgPathData = "M448 400L64 400c-8.8 0-16-7.2-16-16L48 96c0-8.8 7.2-16 16-16l138.7 0c3.5 0 6.8 1.1 9.6 3.2L250.7 112c13.8 10.4 30.7 16 48 16L448 128c8.8 0 16 7.2 16 16l0 240c0 8.8-7.2 16-16 16zM64 448l384 0c35.3 0 64-28.7 64-64l0-240c0-35.3-28.7-64-64-64L298.7 80c-6.9 0-13.7-2.2-19.2-6.4L241.1 44.8C230 36.5 216.5 32 202.7 32L64 32C28.7 32 0 60.7 0 96L0 384c0 35.3 28.7 64 64 64zm175-95c9.4 9.4 24.6 9.4 33.9 0l64-64c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0l-23 23 0-86.1c0-13.3-10.7-24-24-24s-24 10.7-24 24l0 86.1-23-23c-9.4-9.4-24.6-9.4-33.9 0s-9.4 24.6 0 33.9l64 64z"; 5567 exports.definition = { 5568 prefix, 5569 iconName, 5570 icon: [ 5571 width, 5572 height, 5573 aliases, 5574 unicode, 5575 svgPathData 5576 ] 5577 }; 5578 exports.faFolderArrowDown = exports.definition; 5579 exports.prefix = prefix; 5580 exports.iconName = iconName; 5581 exports.width = width; 5582 exports.height = height; 5583 exports.ligatures = aliases; 5584 exports.unicode = unicode; 5585 exports.svgPathData = svgPathData; 5586 exports.aliases = aliases; 5587})))(); 5588var empty_recordings_folder_default = "data:image/svg+xml,%3csvg%20width='46'%20height='35'%20viewBox='0%200%2046%2035'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M41%209.875C41%208.04688%2039.4531%206.5%2037.625%206.5H24.125L19.625%202H8.375C6.47656%202%205%203.54688%205%205.375V13.25V30.125C5%2032.0234%206.47656%2033.5%208.375%2033.5H37.625C39.4531%2033.5%2041%2032.0234%2041%2030.125V13.25V9.875ZM26%2021C26%2019.3438%2024.625%2018%2023%2018C21.3438%2018%2020%2019.3438%202
55880%2021C20%2022.6562%2021.3438%2024%2023%2024C24.625%2024%2026%2022.6562%2026%2021ZM24.9852%2013.25C24.3501%2013.0868%2023.6848%2013%2023%2013C22.3103%2013%2021.6417%2013.0868%2021.0044%2013.25C17.5412%2014.1367%2015%2017.2786%2015%2021C15%2025.4375%2018.5625%2029%2023%2029C27.4062%2029%2031%2025.4375%2031%2021C31%2017.2786%2028.4366%2014.1367%2024.9852%2013.25ZM29.5%2021C29.5%2024.5938%2026.5625%2027.5%2023%2027.5C19.4062%2027.5%2016.5%2024.5938%2016.5%2021C16.5%2017.4375%2019.4062%2014.5%2023%2014.5C26.5625%2014.5%2029.5%2017.4375%2029.5%2021Z'%20fill='%230053E5'%20fill-opacity='0.2'/%3e%3c/svg%3e"; 5589//#endregion 5590//#region client/images/svg/truffle/empty-ai-video-drafts-folder.svg 5591var empty_ai_video_drafts_folder_default = "data:image/svg+xml,%3csvg%20width='36'%20height='32'%20viewBox='0%200%2036%2032'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20opacity='0.5'%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M32.625%204.5C34.4531%204.5%2036%206.04688%2036%207.875V28.125C36%2030.0234%2034.4531%2031.5%2032.625%2031.5H3.375C1.47656%2031.5%200%2030.0234%200%2028.125V3.375C0%201.54688%201.47656%200%203.375%200H14.625L19.125%204.5H32.625ZM19.7227%2013.0365C19.7227%2013.1302%2019.7539%2013.224%2019.8477%2013.2865L21.7227%2014.0365L22.4727%2015.9115C22.5352%2016.0052%2022.6289%2016.0365%2022.7227%2016.0365C22.8164%2016.0365%2022.8789%2016.0052%2022.9414%2015.9115L23.7227%2014.0365L25.5664%2013.2865C25.6602%2013.224%2025.7227%2013.1302%2025.7227%2013.0365C25.7227%2012.9427%2025.6602%2012.8802%2025.5664%2012.8177L23.7227%2012.0365L22.9414%2010.1927C22.8789%2010.099%2022.8164%2010.0365%2022.7227%2010.0365C22.6289%2010.0365%2022.5352%2010.099%2022.4727%2010.1927L21.7227%2012.0365L19.8477%2012.8177C19.7539%2012.8802%2019.7227%2012.9427%2019.7227%2013.0365ZM25.7227%2023.0365C25.7227%2022.9427%2025.6602%2022.8802%2025.5664%2022.8177L23.7227%2022.0365L22.9414%2020.1927C22.8789%2020.099%2022.8164%2020.0365%2022.7227%2020.0365C22.6289%2020.0365%2022.5352%2020.099%2022.4727%2020.1927L21.7227%2022.0365L19.8477%2022.8177C19.7539%2022.8802%2019.7227%2022.9427%2019.7227%2023.0365C19.7227%2023.1302%2019.7539%2023.224%2019.8477%2023.2865L21.7227%2024.0365L22.4727%2025.9115C22.5352%2026.0052%2022.6289%2026.0365%2022.7227%2026.0365C22.8164%2026.0365%2022.8789%2026.0052%2022.9414%2025.9115L23.7227%2024.0365L25.5664%2023.2865C25.6602%2023.224%2025.7227%2023.1302%2025.7227%2023.0365ZM21.4414%2018.474C21.5977%2018.4115%2021.7227%2018.224%2021.7227%2018.0365C21.7227%2017.849%2021.5977%2017.6615%2021.4414%2017.599L17.9102%2015.8177L16.1602%2012.3177C15.9727%2011.974%2015.4414%2011.974%2015.2539%2012.3177L13.5039%2015.8177L9.9727%2017.599C9.8164%2017.6615%209.7227%2017.849%209.7227%2018.0365C9.7227%2018.224%209.8164%2018.4115%209.9727%2018.474L13.5039%2020.2552L15.2539%2023.7865C15.3477%2023.9427%2015.5039%2024.0365%2015.7227%2024.0365C15.8789%2024.0365%2016.0664%2023.9427%2016.1602%2023.7865L17.9102%2020.2552L21.4414%2018.474Z'%20fill='url(%23paint0_linear_6166_176598)'/%3e%3cdefs%3e%3clinearGradient%20id='paint0_linear_6166_176598'%20x1='6.35294'%20y1='1.73329e-06'%20x2='37.7848'%20y2='16.3576'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-color='%23EB89F1'/%3e%3cstop%20offset='0.140625'%20stop-color='%23D47FEF'/%3e%3cstop%20offset='0.276042'%20stop-color='%23C175EE'/%3e%3cstop%20offset='0.421875'%20stop-color='%23AB6DEC'/%3e%3cstop%20offset='0.567708'%20stop-color='%239365EB'/%3e%3cstop%20offset='0.713542'%20stop-color='%23775EE9'/%3e%3cstop%20offset='0.854167'%20stop-color='%235358E7'/%3e%3cstop%20offset='1'%20stop-color='%230053E5'/%3e%3c/linearGradient%3e%3c/defs%3e%3c/svg%3e"; 5592//#endregion 5593//#region client/images/svg/truffle/non-empty-recordings-folder.svg 5594var non_empty_recordings_folder_default = "data:image/svg+xml,%3csvg%20width='46'%20height='35'%20viewBox='0%200%2046%2035'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M41%208.875C41%207.04688%2039.4531%205.5%2037.625%205.5H24.125L19.625%201H8.375C6.47656%201%205%202.54688%205%204.375V12.25V29.125C5%2031.0234%206.47656%2032.5%208.375%2032.5H37.625C39.4531%2032.5%2041%2031.0234%2041%2029.125V12.25V8.875ZM26%2020C26%2018.3438%2024.625%2017%2023%2017C21.3438%2017%2020%2018.3438%202
55940%2020C20%2021.6562%2021.3438%2023%2023%2023C24.625%2023%2026%2021.6562%2026%2020ZM24.9852%2012.25C24.3501%2012.0868%2023.6848%2012%2023%2012C22.3103%2012%2021.6417%2012.0868%2021.0044%2012.25C17.5412%2013.1367%2015%2016.2786%2015%2020C15%2024.4375%2018.5625%2028%2023%2028C27.4062%2028%2031%2024.4375%2031%2020C31%2016.2786%2028.4366%2013.1367%2024.9852%2012.25ZM29.5%2020C29.5%2023.5938%2026.5625%2026.5%2023%2026.5C19.4062%2026.5%2016.5%2023.5938%2016.5%2020C16.5%2016.4375%2019.4062%2013.5%2023%2013.5C26.5625%2013.5%2029.5%2016.4375%2029.5%2020Z'%20fill='%238BA2FF'/%3e%3c/svg%3e"; 5595//#endregion 5596//#region client/images/svg/truffle/non-empty-ai-video-drafts-folder.svg 5597var non_empty_ai_video_drafts_folder_default = "data:image/svg+xml,%3csvg%20width='46'%20height='35'%20viewBox='0%200%2046%2035'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M38.125%206.5C39.9531%206.5%2041.5%208.04688%2041.5%209.875V30.125C41.5%2032.0234%2039.9531%2033.5%2038.125%2033.5H8.875C6.97656%2033.5%205.5%2032.0234%205.5%2030.125V5.375C5.5%203.54688%206.97656%202%208.875%202H20.125L24.625%206.5H38.125ZM25.2227%2015.0365C25.2227%2015.1302%2025.2539%2015.224%2025.3477%2015.2865L27.2227%2016.0365L27.9727%2017.9115C28.0352%2018.0052%2028.1289%2018.0365%2028.2227%2018.0365C28.3164%2018.0365%2028.3789%2018.0052%2028.4414%2017.9115L29.2227%2016.0365L31.0664%2015.2865C31.1602%2015.224%2031.2227%2015.1302%2031.2227%2015.0365C31.2227%2014.9427%2031.1602%2014.8802%2031.0664%2014.8177L29.2227%2014.0365L28.4414%2012.1927C28.3789%2012.099%2028.3164%2012.0365%2028.2227%2012.0365C28.1289%2012.0365%2028.0352%2012.099%2027.9727%2012.1927L27.2227%2014.0365L25.3477%2014.8177C25.2539%2014.8802%2025.2227%2014.9427%2025.2227%2015.0365ZM31.2227%2025.0365C31.2227%2024.9427%2031.1602%2024.8802%2031.0664%2024.8177L29.2227%2024.0365L28.4414%2022.1927C28.3789%2022.099%2028.3164%2022.0365%2028.2227%2022.0365C28.1289%2022.0365%2028.0352%2022.099%2027.9727%2022.1927L27.2227%2024.0365L25.3477%2024.8177C25.2539%2024.8802%2025.2227%2024.9427%2025.2227%2025.0365C25.2227%2025.1302%2025.2539%2025.224%2025.3477%2025.2865L27.2227%2026.0365L27.9727%2027.9115C28.0352%2028.0052%2028.1289%2028.0365%2028.2227%2028.0365C28.3164%2028.0365%2028.3789%2028.0052%2028.4414%2027.9115L29.2227%2026.0365L31.0664%2025.2865C31.1602%2025.224%2031.2227%2025.1302%2031.2227%2025.0365ZM26.9414%2020.474C27.0977%2020.4115%2027.2227%2020.224%2027.2227%2020.0365C27.2227%2019.849%2027.0977%2019.6615%2026.9414%2019.599L23.4102%2017.8177L21.6602%2014.3177C21.4727%2013.974%2020.9414%2013.974%2020.7539%2014.3177L19.0039%2017.8177L15.4727%2019.599C15.3164%2019.6615%2015.2227%2019.849%2015.2227%2020.0365C15.2227%2020.224%2015.3164%2020.4115%2015.4727%2020.474L19.0039%2022.2552L20.7539%2025.7865C20.8477%2025.9427%2021.0039%2026.0365%2021.2227%2026.0365C21.3789%2026.0365%2021.5664%2025.9427%2021.6602%2025.7865L23.4102%2022.2552L26.9414%2020.474Z'%20fill='url(%23paint0_linear_6166_57723)'/%3e%3cdefs%3e%3clinearGradient%20id='paint0_linear_6166_57723'%20x1='11.8529'%20y1='2'%20x2='43.2848'%20y2='18.3576'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-color='%23EB89F1'/%3e%3cstop%20offset='0.140625'%20stop-color='%23D47FEF'/%3e%3cstop%20offset='0.276042'%20stop-color='%23C175EE'/%3e%3cstop%20offset='0.421875'%20stop-color='%23AB6DEC'/%3e%3cstop%20offset='0.567708'%20stop-color='%239365EB'/%3e%3cstop%20offset='0.713542'%20stop-color='%23775EE9'/%3e%3cstop%20offset='0.854167'%20stop-color='%235358E7'/%3e%3cstop%20offset='1'%20stop-color='%230053E5'/%3e%3c/linearGradient%3e%3c/defs%3e%3c/svg%3e"; 5598//#endregion 5599//#region client/utils/hooks/useDebounce.ts 5600function useDebounce(value, delay) { 5601 const [debouncedValue, setDebouncedValue] = (0, import_react.useState)(value); 5602 (0, import_react.useEffect)(() => { 5603 const timeout = setTimeout(() => setDebouncedValue(value), delay); 5604 return () => { 5605 clearTimeout(timeout); 5606 }; 5607 }, [value, delay]); 5608 return debouncedValue; 5609} 5610//#endregion 5611//#region client/utils/hooks/useExtendedDropzone.ts 5612var FORCE_REJECTION_ERROR = { 5613 message: "Force rejection", 5614 code: "force-rejection" 5615}; 5616function forceRejectionValidator() { 5617 return FORCE_REJECTION_ERROR; 5618} 5619/** 5620* Extended dropzone hook 5621* 5622* Default value changes: 5623* - noClick: true 5624* - preventDropOnDocument: true 5625*/ 5626function useExtendedDropzone(options) { 5627 const [isDataDragActive, setIsDataDragActive] = (0, import_react.useState)(false); 5628 const [isDataDragAccept, setIsDataDragAccept] = (0, import_react.useState)(false); 5629 const [isDataDragReject, setIsDataDragReject] = (0, import_react.useState)(false); 5630 const [acceptedData, setAcceptedData] = (0, import_react.useState)(null); 5631 const [dataRejection, setDataRejection] = (0, import_react.useState)(null); 5632 const state = useDropzone({ 5633 noClick: true, 5634 preventDropOnDocument: true, 5635 ...options, 5636 accept: options?.acceptFiles, 5637 onDrop: options?.onFileDrop, 5638 onDropAccepted: options?.onFileDropAccepted, 5639 onDropRejected: options?.onFileDropRejected, 5640 validator: options?.forceRejection ? forceRejectionValidator : options?.fileValidator 5641 }); 5642 const isDataTypeValid = (0, import_react.useCallback)((e) => { 5643 if (!options?.acceptData) return true; 5644 for (const type of e.dataTransfer.types) for (const accept of options?.acceptData || []) if (type === dragAndDropMimeType(accept)) return true; 5645 return false;
5646 }, [options?.acceptData]); 5647 const getDataFromEvent = (0, import_react.useCallback)((e) => { 5648 for (const accept of options?.acceptData || []) { 5649 const data = e.dataTransfer.getData(dragAndDropMimeType(accept)); 5650 if (data) return data; 5651 } 5652 return ""; 5653 }, [options?.acceptData]); 5654 const validateData = (0, import_react.useCallback)((e) => { 5655 const data = getDataFromEvent(e); 5656 if (!data) return { 5657 acceptedData: null, 5658 dataRejection: null 5659 }; 5660 const parsedData = JSON.parse(data); 5661 if (options?.forceRejection) return { 5662 acceptedData: null, 5663 dataRejection: { 5664 data: parsedData, 5665 errors: [FORCE_REJECTION_ERROR] 5666 } 5667 }; 5668 if (options?.dataValidator) { 5669 const errors = options.dataValidator(parsedData); 5670 if (errors) return { 5671 acceptedData: null, 5672 dataRejection: { 5673 data: parsedData, 5674 errors: Array.isArray(errors) ? errors : [errors] 5675 } 5676 }; 5677 } 5678 return { 5679 acceptedData: parsedData, 5680 dataRejection: null 5681 }; 5682 }, [ 5683 options?.acceptData, 5684 options?.forceRejection, 5685 options?.dataValidator, 5686 getDataFromEvent 5687 ]); 5688 /** 5689 * Root props for the dropzone element, wrapping react-dropzone's own handlers. 5690 * 5691 * Invariant: a drag carrying an `application/vnd.sundaysky.*` type is an internal 5692 * (data) drag and must never reach react-dropzone's file pipeline. Chromium attaches 5693 * a native image/file entry to drags that start on an `<img>`/`<video>`, which is the 5694 * case for every media-library thumbnail, so without this guard an internal drag also 5695 * runs the file pipeline and gets rejected as an unsupported file. 5696 */ 5697 const getRootProps = (0, import_react.useCallback)((props) => { 5698 const rootProps = state.getRootProps(props); 5699 if (options?.disabled) return rootProps; 5700 return { 5701 ...rootProps, 5702 onDragEnter(e) { 5703 e.preventDefault(); 5704 if (!hasDataItems(e)) { 5705 rootProps.onDragEnter(e); 5706 return; 5707 } 5708 setIsDataDragActive(true); 5709 const valid = isDataTypeValid(e) && !options?.forceRejection; 5710 setIsDataDragAccept(valid); 5711 setIsDataDragReject(!valid); 5712 }, 5713 onDragLeave(e) { 5714 e.preventDefault(); 5715 if (!hasDataItems(e)) rootProps.onDragLeave(e); 5716 setIsDataDragActive(false); 5717 setIsDataDragAccept(false); 5718 setIsDataDragReject(false); 5719 options?.onDragLeave?.(e); 5720 }, 5721 onDrop(e) { 5722 e.preventDefault(); 5723 if (!hasDataItems(e)) { 5724 if (hasDirectories(e)) e.dataTransfer = new DataTransfer(); 5725 rootProps.onDrop(e); 5726 setIsDataDragActive(false); 5727 setIsDataDragReject(false); 5728 setIsDataDragAccept(false); 5729 return; 5730 } 5731 setIsDataDragActive(false); 5732 setIsDataDragReject(false); 5733 setIsDataDragAccept(false); 5734 if (!isDataTypeValid(e)) return; 5735 const { acceptedData, dataRejection } = validateData(e); 5736 setAcceptedData(acceptedData); 5737 setDataRejection(dataRejection); 5738 if (dataRejection) options?.onDataDropRejected?.(dataRejection, e); 5739 if (acceptedData) options?.onDataDropAccepted?.(acceptedData, e); 5740 options?.onDataDrop?.(acceptedData, dataRejection, e); 5741 }, 5742 onDragOver(e) { 5743 e.preventDefault(); 5744 if (options?.dropEffect) e.dataTransfer.dropEffect = options.dropEffect; 5745 if (!hasDataItems(e)) { 5746 rootProps.onDragOver(e); 5747 return; 5748 } 5749 setIsDataDragActive(true); 5750 const valid = isDataTypeValid(e) && !options?.forceRejection; 5751 setIsDataDragAccept(valid); 5752 setIsDataDragReject(!valid); 5753 options?.onDragOver?.(e); 5754 } 5755 }; 5756 }, [ 5757 options?.disabled, 5758 options?.dropEffect, 5759 options?.forceRejection, 5760 options?.onDataDrop, 5761 options?.onDataDropAccepted, 5762 options?.onDataDropRejected, 5763 options?.onDragOver, 5764 setIsDataDragActive, 5765 setIsDataDragAccept, 5766 setIsDataDragReject, 5767 setAcceptedData, 5768 setDataRejection, 5769 state.getRootProps, 5770 validateData, 5771 isDataTypeValid 5772 ]); 5773 const debouncedIsFileDragActive = useDebounce(state.isDragActive, 50); 5774 const debouncedIsDataDragActive = useDebounce(isDataDragActive, 50); 5775 return { 5776 ...state, 5777 getRootProps, 5778 isFileDragActive: debouncedIsFileDragActive, 5779 isFileDragAccept: state.isDragAccept, 5780 isFileDragReject: state.isDragReject, 5781 isDataDragActive: debouncedIsDataDragActive && !options?.disabled, 5782 isDataDragAccept: isDataDragAccept && !options?.disabled, 5783 isDataDragReject: isDataDragReject && !options?.disabled, 5784 isDragActive: debouncedIsFileDragActive || debouncedIsDataDragActive && !options?.disabled, 5785 isDragAccept: state.isDragAccept || isDataDragAccept && !options?.disabled, 5786 isDragReject: state.isDragReject || isDataDragReject && !options?.disabled, 5787 acceptedData, 5788 dataRejection 5789 }; 5790} 5791//#endregion 5792//#region client/components/editor/Hooks/UseEditorMediaDragAndDropSnackbarState/useEditorMediaDragAndDropSnackbar.ts 5793var debouncedSetMediaDragAndDropSnackbarState = (0, import_lodash.debounce)(setMediaDragAndDropSnackbarState, 100); 5794function useEditorMediaDragAndDropSnackbar(isFileDragActive, isFileDragAccept, isFileDragReject) { 5795 (0, import_react.useEffect)(() => { 5796 if (isFileDragActive) { 5797 if (isFileDragAccept) debouncedSetMediaDragAndDropSnackbarState(EditorMediaDragAndDropSnackbarState.INFO); 5798 else if (isFileDragReject) debouncedSetMediaDragAndDropSnackbarState(EditorMediaDragAndDropSnackbarState.ERROR); 5799 } 5800 return () => { 5801 setMediaDragAndDropSnackbarState(EditorMediaDragAndDropSnackbarState.CLOSED); 5802 }; 5803 }, [ 5804 isFileDragActive, 5805 isFileDragAccept, 5806 isFileDragReject 5807 ]); 5808} 5809//#endregion 5810//#region client/components/editor/Components/TruffleEditingWorkSpace/Components/FileUploadDialog/FileUploadUtils.ts 5811function handleAssetUploadError(fileName, error, context) {
5812 if (error?.getSskyErrorCode?.()) { 5813 handleFileUploadError(fileName, error, context); 5814 return; 5815 } 5816 const gqlError = error.graphQLErrors?.[0]; 5817 if (gqlError) { 5818 handleEditorError({ 5819 error: gqlError, 5820 sskyCode: getSskyErrorCodeFromGqlError(gqlError), 5821 fileName 5822 }); 5823 return; 5824 } 5825 let sskyCode; 5826 switch (error?.message || error) { 5827 case illegalFileFormatMsg: 5828 sskyCode = context === UploadFileContext.MusicLibrary ? SskyErrorCode.UnsupportedAssetTypeMusic : SskyErrorCode.UnsupportedAssetTypeImageAndVideo; 5829 break; 5830 case imageSizeExceededMsg: 5831 sskyCode = SskyErrorCode.ImageAssetSizeTooBig; 5832 break; 5833 case videoSizeExceededMsg: 5834 sskyCode = SskyErrorCode.VideoAssetSizeTooBig; 5835 break; 5836 case audioSizeExceededMsg: 5837 sskyCode = SskyErrorCode.AudioAssetSizeTooBig; 5838 break; 5839 default: 5840 sskyCode = SskyErrorCode.UnexpectedClientError; 5841 break; 5842 } 5843 handleFileUploadError(fileName, new EnhancedError(error, sskyCode), context); 5844} 5845async function handleFileUploadAsync(file, uploadFileFnAsync, { onSuccess, onFailure }, uploadFileParams) { 5846 await uploadFileFnAsync(file, uploadFileParams?.programId, onSuccess, onFailure, uploadFileParams?.metadata, uploadFileParams?.parentFolderId, uploadFileParams?.skipTranscode, uploadFileParams?.forceTranscode, uploadFileParams?.mediaOrigin, uploadFileParams?.overrideSizeLimits); 5847} 5848async function handleFileUpload(file, uploadFileFn, { onSuccess, onFailure }, uploadFileParams) { 5849 const fileName = file.name; 5850 const fileType = file.type; 5851 const { error, uploadResult } = await uploadFileFn(file, uploadFileParams?.programId, uploadFileParams?.metadata, uploadFileParams?.parentFolderId, uploadFileParams?.overrideSizeLimits, uploadFileParams?.mediaOrigin); 5852 if (error) onFailure(fileName, error); 5853 else onSuccess(fileName, fileType, uploadResult); 5854} 5855//#endregion 5856//#region client/components/editor/Components/TruffleEditingWorkSpace/Components/Libraries/Components/TruffleMediaLibrary/YourLibraryTab/useUploadMediaAssets.ts 5857var bulkLengthLimit = 100; 5858var handleUploadFailure = (fileName, error) => { 5859 handleAssetUploadError$1(fileName, error, UploadFileContext.NonLibraryMedia); 5860}; 5861function useUploadMediaAssets(parentFolderId, parentFolderName, showFolderActionsSuccess, onMoveComplete, isImageModeOnly) { 5862 const { parentFolder, rootFolder } = getMediaFolder(parentFolderId); 5863 const { uploadFileFn, uploadFileFnAsync } = (0, import_react.useContext)(TruffleMediaLibraryContext); 5864 const handleUploadSuccess = (0, import_react.useCallback)((uploadOrigin) => (fileName, type, uploadResult) => { 5865 const mediaType = uploadResult.mediaMetadata.mediaType.toLowerCase(); 5866 if (isImageModeOnly && mediaType === "video") setNeutralNotification({ 5867 message: "Displaying images only. Videos can be viewed in 'Your Media'.", 5868 duration: null 5869 }); 5870 upsertProcessedFile({ 5871 fileName, 5872 type, 5873 status: "success" 5874 }); 5875 PendoService.getInstance().trackEvent("Media lib add asset", { 5876 mediaType, 5877 mediaSize: Math.round(uploadResult.mediaMetadata.size / 1024).toString(), 5878 mediaAddOrigin: uploadOrigin, 5879 mediaAddTarget: parentFolder ? "folder" : "lib root" 5880 }); 5881 if (parentFolderId) showFolderActionsSuccess ? setSuccessNotification({ 5882 message: `File ${truncate(fileName, 50)} uploaded to ${parentFolderName}`, 5883 showCloseButton: true, 5884 actionButton: onMoveComplete ? { 5885 label: "Go to Folder", 5886 onClick: () => onMoveComplete(parentFolderId) 5887 } : null 5888 }) : onMoveComplete?.(parentFolderId); 5889 }, [parentFolder, isImageModeOnly]); 5890 return { createUploadHandler: (0, import_react.useCallback)((uploadOrigin) => async (files) => { 5891 if (files.length === 0) return; 5892 if (files.length > bulkLengthLimit) return; 5893 await uploadConcurrently(files.map((file) => () => { 5894 upsertProcessedFile({ 5895 fileName: file.name, 5896 status: "loading" 5897 }); 5898 const callbacks = { 5899 onSuccess: handleUploadSuccess(uploadOrigin), 5900 onFailure: handleUploadFailure 5901 }; 5902 const uploadFileParams = { parentFolderId: parentFolderId || rootFolder?.id }; 5903 if (uploadFileFnAsync) return handleFileUploadAsync(file, uploadFileFnAsync, callbacks, uploadFileParam
5903s); 5904 else return handleFileUpload(file, uploadFileFn, callbacks, uploadFileParams); 5905 })); 5906 }, [ 5907 handleUploadSuccess, 5908 parentFolderId, 5909 rootFolder?.id, 5910 uploadFileFn, 5911 uploadFileFnAsync 5912 ]) }; 5913} 5914//#endregion 5915//#region client/components/editor/Hooks/UseMediaLibraryDraggingFromFolderId/UseMediaLibraryDraggingFromFolderId.ts 5916var useMediaLibraryDraggingFromFolderId = () => useReactiveVar(localEditorMediaLibraryDraggingFromFolderId); 5917//#endregion 5918//#region client/components/editor/Components/TruffleEditingWorkSpace/Components/Libraries/Components/TruffleMediaLibrary/YourLibraryTab/YourMediaDropzone.tsx 5919var ACCEPT_ASSET_FILES$1 = { 5920 "image/*": fileExtByMediaType.image, 5921 "video/*": fileExtByMediaType.video 5922}; 5923var DescendantDropzoneState = /* @__PURE__ */ function(DescendantDropzoneState) { 5924 DescendantDropzoneState["INACTIVE"] = "INACTIVE"; 5925 DescendantDropzoneState["DRAGOVER"] = "DRAGOVER"; 5926 DescendantDropzoneState["ACCEPT"] = "ACCEPT"; 5927 DescendantDropzoneState["REJECT"] = "REJECT"; 5928 return DescendantDropzoneState; 5929}({}); 5930var YourMediaDropzoneContext = (0, import_react.createContext)({ 5931 isDragActive: false, 5932 setDescendantDropzoneState: () => {} 5933}); 5934var YourMediaDropzone = (props) => { 5935 const draggingFromFolderId = useMediaLibraryDraggingFromFolderId(); 5936 const { currentFolderId } = (0, import_react.useContext)(TruffleMediaLibraryContext); 5937 const isDraggingIntoAnotherFolder = !!draggingFromFolderId && !!currentFolderId && draggingFromFolderId !== currentFolderId; 5938 const { mediaByFolderId, foldersByParentFolderId, foldersById } = getMediaFolder(); 5939 const [descendantDropzoneState, setDescendantDropzoneState] = (0, import_react.useState)("INACTIVE"); 5940 const [isConfirmAlreadyExistDialogOpen, setIsConfirmAlreadyExistDialogOpen] = (0, import_react.useState)(false); 5941 const confirmAlreadyExistItem = (0, import_react.useRef)(null); 5942 const { getRootProps, isDragActive, isFileDragActive, isFileDragAccept, isFileDragReject } = useExtendedDropzone({ 5943 disabled: props.disabled, 5944 acceptFiles: ACCEPT_ASSET_FILES$1, 5945 acceptData: isDraggingIntoAnotherFolder ? [ItemType.YOUR_LIBRARY, ItemType.FOLDER] : void 0, 5946 dropEffect: "move", 5947 onFileDropAccepted: (files, event) => { 5948 PendoService.getInstance().trackEvent("Drag and drop media", { 5949 mediaDragType: files.length === 1 ? "single-asset" : "multi-assets", 5950 mediaOrigin: "Computer", 5951 mediaDropTarget: "Your Media", 5952 actionSuccess: "true" 5953 }); 5954 props.onFileDropAccepted(files, event); 5955 }, 5956 onDataDropAccepted(acceptedData) { 5957 if (!isDraggingIntoAnotherFolder) return; 5958 if (acceptedData.type === ItemType.YOUR_LIBRARY) if (isItemAlreadyExist(acceptedData.name, currentFolderId, mediaByFolderId)) { 5959 confirmAlreadyExistItem.current = acceptedData; 5960 setIsConfirmAlreadyExistDialogOpen(true); 5961 } else moveEditorAssetToFolder(acceptedData.id, acceptedData.name, currentFolderId, () => {}, () => {}, () => {}, false); 5962 if (acceptedData.type === ItemType.FOLDER) if (isItemAlreadyExist(acceptedData.name, currentFolderId, foldersByParentFolderId)) { 5963 confirmAlreadyExistItem.current = acceptedData; 5964 setIsConfirmAlreadyExistDialogOpen(true); 5965 } else moveEditorFolderToFolder(acceptedData.id, acceptedData.name, currentFolderId, () => {}, () => {}, () => {}, false); 5966 }, 5967 onFileDropRejected: (rejections) => { 5968 PendoService.getInstance().trackEvent("Drag and drop media", { 5969 mediaDragType: rejections.length === 1 ? "single-asset" : "multi-assets", 5970 mediaOrigin: "Computer", 5971 mediaDropTarget: "Your Media", 5972 actionSuccess: "false" 5973 }); 5974 }, 5975 onFileDrop() { 5976 setDescendantDropzoneState("INACTIVE"); 5977 }, 5978 onDragLeave() { 5979 setDescendantDropzoneState("INACTIVE"); 5980 } 5981 }); 5982 useEditorMediaDragAndDropSnackbar(isFileDragActive, isFileDragAccept, isFileDragReject); 5983 const contextValue = (0, import_react.useMemo)(() => ({ 5984 isDragActive: isDragActive || descendantDropzoneState !== "INACTIVE", 5985 setDescendantDropzoneState 5986 }), [ 5987 isDragActive, 5988 descendantDropzoneState, 5989 setDescendantDropzoneState 5990 ]); 5991 const onConfirmAlreadyExistClose = () => { 5992 confirmAlreadyExistItem.current = null; 5993 setIsConfirmAlreadyExistDialogOpen(false); 5994 }; 5995 const onConfirmAlreadyExistConfirm = () => { 5996 if (confirmAlreadyExistItem.current.type === ItemType.YOUR_LIBRARY) moveEditorAssetToFolder(confirmAlreadyExistItem.current.id, confirmAlreadyExistItem.current.name, currentFolderId, () => {}, () => {}, () => {}, false); 5997 if (confirmAlreadyExistItem.current.type === ItemType.FOLDER) moveEditorFolderToFolder(confirmAlreadyExistItem.current.id, confirmAlreadyExistItem.current.name, currentFolderId, () => {}, () => {}, () => {}, false); 5998 }; 5999 return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(DropzoneContainer, { 6000 ...getRootProps(), 6001 "data-drag-active": (isDraggingIntoAnotherFolder ? isDragActive : isFileDragActive) || descendantDropzoneState === "ACCEPT" || descendantDropzoneState === "REJECT", 6002 "aria-invalid": isFileDragReject || descendantDropzoneState === "REJECT", 6003 children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(YourMediaDropzoneContext.Provider, { 6004 value: contextValue, 6005 children: props.children 6006 }) 6007 }
6007), confirmAlreadyExistItem.current ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ConfirmAlreadyExistDialog, { 6008 open: isConfirmAlreadyExistDialogOpen, 6009 onClose: onConfirmAlreadyExistClose, 6010 onConfirm: onConfirmAlreadyExistConfirm, 6011 itemDetails: { 6012 typeDetails: { 6013 capitalizedTypeName: confirmAlreadyExistItem.current?.type === ItemType.FOLDER ? "Folder" : "Asset", 6014 article: confirmAlreadyExistItem.current?.type === ItemType.FOLDER ? "A" : "An" 6015 }, 6016 name: confirmAlreadyExistItem.current?.name 6017 }, 6018 targetFolder: foldersById.get(currentFolderId), 6019 rootFolderName: "Your Media" 6020 }) : null] }); 6021}; 6022var DropzoneContainer = (0, import_material.styled)(import_material.Box)(({ theme }) => ({ 6023 width: "100%", 6024 height: "100%", 6025 position: "relative", 6026 minHeight: 0, 6027 "&[data-drag-active=true] .media-grid-content": { 6028 outline: `1px dashed ${theme.palette.primary.light}`, 6029 backgroundColor: theme.palette.divider, 6030 "&>*": { mixBlendMode: "multiply" } 6031 }, 6032 "&[data-drag-active=true][aria-invalid=true] .media-grid-content": { 6033 outline: `1px dashed ${theme.palette.error.main}`, 6034 backgroundColor: (0, import_material.alpha)(theme.palette.error.main, theme.palette.action.focusOpacity) 6035 } 6036})); 6037//#endregion 6038//#region common/assetUploadUtils.ts 6039/** 6040* Encodes asset key to valid URI 6041* 6042* @param assetKey to encode 6043*/ 6044var encodeAssetKey = (assetKey) => { 6045 return assetKey.split("/").map((part) => encodeURIComponent(part)).join("/"); 6046}; 6047var getEncodedAssetUrl = (base, key) => { 6048 return base + encodeAssetKey(key); 6049}; 6050//#endregion 6051//#region client/components/editor/Components/TruffleEditingWorkSpace/Components/Libraries/Components/TruffleMediaLibrary/AssetGrid/YourLibraryFolderCard.tsx 6052var ACCEPT_ASSET_FILES = { 6053 "image/*": fileExtByMediaType.image, 6054 "video/*": fileExtByMediaType.video 6055}; 6056var YourLibraryFolderCard = (props) => { 6057 const { setActiveTab, setCurrentFolderId } = (0, import_react.useContext)(TruffleMediaLibraryContext); 6058 const { isDragActive: isYourMediaDragActive, setDescendantDropzoneState } = (0, import_react.useContext)(YourMediaDropzoneContext); 6059 const { media, folders, mediaByFolderId, foldersByParentFolderId, parentFolder } = getMediaFolder(props.folder.id); 6060 const [isConfirmAlreadyExistDialogOpen, setIsConfirmAlreadyExistDialogOpen] = (0, import_react.useState)(false); 6061 const confirmAlreadyExistItem = (0, import_react.useRef)(null); 6062 const goToFolder = (folderId) => { 6063 setCurrentFolderId(folderId); 6064 closeNotification(); 6065 }; 6066 const { createUploadHandler } = useUploadMediaAssets(props.folder.id, props.folder.name, props.showFolderActionsSuccess, goToFolder); 6067 const debouncedNavigateToFolder = sameArgsDebounce((onNavigate, _e) => onNavigate?.(), 3e3, ([prevNavigate, prevEvent], [currNavigate, currEvent]) => prevNavigate === currNavigate && prevEvent.clientX === currEvent.clientX && prevEvent.clientY === currEvent.clientY); 6068 const { getRootProps, isDragActive, isDragReject, isFileDragActive, isFileDragAccept, isFileDragReject } = useExtendedDropzone({ 6069 disabled: props.dropzoneDisabled, 6070 acceptFiles: ACCEPT_ASSET_FILES, 6071 acceptData: [ItemType.YOUR_LIBRARY, ItemType.FOLDER], 6072 dropEffect: "move", 6073 noDragEventsBubbling: true, 6074 onFileDropAccepted: createUploadHandler(UploadOrigin.COMPUTER_DRAG_AND_DROP), 6075 onDataDropAccepted: async (acceptedData) => { 6076 if (acceptedData.type === ItemType.YOUR_LIBRARY) if (isItemAlreadyExist(acceptedData.name, props.folder.id, mediaByFolderId)) { 6077 confirmAlreadyExistItem.current = acceptedData; 6078 setIsConfirmAlreadyExistDialogOpen(true); 6079 } else await moveEditorAssetToFolder(acceptedData.id, acceptedData.name, props.folder.id, setActiveTab, setCurrentFolderId, props.onMoveComplete, props.showFolderActionsSuccess); 6080 if (acceptedData.type === ItemType.FOLDER) if (isItemAlreadyExist(acceptedData.name, props.folder.id, foldersByParentFolderId)) { 6081 confirmAlreadyExistItem.current = acceptedData; 6082 setIsConfirmAlreadyExistDialogOpen(true); 6083 } else await moveEditorFolderToFolder(acceptedData.id, acceptedData.name, props.folder.id, setActiveTab, setCurrentFolderId, props.onMoveComplete, props.showFolderActionsSuccess); 6084 }, 6085 onFileDrop() {
6086 setDescendantDropzoneState(DescendantDropzoneState.INACTIVE); 6087 }, 6088 onDataDrop() { 6089 setDescendantDropzoneState(DescendantDropzoneState.INACTIVE); 6090 }, 6091 onDragOver(e) { 6092 debouncedNavigateToFolder(props.onNavigate, e); 6093 }, 6094 onDragLeave() { 6095 debouncedNavigateToFolder.cancel(); 6096 } 6097 }); 6098 (0, import_react.useEffect)(() => () => debouncedNavigateToFolder.cancel(), [debouncedNavigateToFolder]); 6099 useEditorMediaDragAndDropSnackbar(isFileDragActive, isFileDragAccept, isFileDragReject); 6100 (0, import_react.useEffect)(() => { 6101 if (isFileDragAccept) setDescendantDropzoneState(DescendantDropzoneState.ACCEPT); 6102 else if (isFileDragReject) setDescendantDropzoneState(DescendantDropzoneState.REJECT); 6103 else if (isDragActive) setDescendantDropzoneState(DescendantDropzoneState.DRAGOVER); 6104 }, [ 6105 isFileDragAccept, 6106 isFileDragReject, 6107 isDragActive 6108 ]); 6109 const isEmpty = media.length === 0 && folders.length === 0; 6110 const isAiAssetMediaFolder = parentFolder?.name === "Root" && parentFolder?.parentFolder === null && (props.folder.name === "AI Media Assets" || props.folder.name === "Copilot"); 6111 const onAlreadyExistClose = () => { 6112 confirmAlreadyExistItem.current = null; 6113 setIsConfirmAlreadyExistDialogOpen(false); 6114 }; 6115 const onAlreadyExistConfirm = async () => { 6116 if (confirmAlreadyExistItem.current.type === ItemType.YOUR_LIBRARY) await moveEditorAssetToFolder(confirmAlreadyExistItem.current.id, confirmAlreadyExistItem.current.name, props.folder.id, setActiveTab, setCurrentFolderId, props.onMoveComplete, props.showFolderActionsSuccess); 6117 if (confirmAlreadyExistItem.current.type == ItemType.FOLDER) await moveEditorFolderToFolder(confirmAlreadyExistItem.current.id, confirmAlreadyExistItem.current.name, props.folder.id, setActiveTab, setCurrentFolderId, props.onMoveComplete, props.showFolderActionsSuccess); 6118 }; 6119 function handleDoubleClick(event) { 6120 if (props.onNavigate) { 6121 props.onNavigate(); 6122 event.stopPropagation(); 6123 event.preventDefault(); 6124 } 6125 } 6126 const handleThreeDotsMenuClick = (0, import_react.useCallback)((e) => { 6127 props.setThreeDotsMenuAnchor(e.currentTarget); 6128 props.setThreeDotsMenuFolderId(props.folder.id); 6129 e.stopPropagation(); 6130 }, [ 6131 props.folder, 6132 props.setThreeDotsMenuAnchor, 6133 props.setThreeDotsMenuFolderId 6134 ]); 6135 const getFolderIcon = () => { 6136 if (isAiAssetMediaFolder) return isEmpty ? empty_ai_video_drafts_folder_default : non_empty_ai_video_drafts_folder_default; 6137 if (props.folder.name === "Recordings") return isEmpty ? empty_recordings_folder_default : non_empty_recordings_folder_default; 6138 return isEmpty ? empty_folder_default : non_empty_folder_default; 6139 }; 6140 const icon = !props.dropzoneDisabled && (isDragActive || isYourMediaDragActive) ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DropzoneIcon, { icon: isDragReject ? import_faExclamationCircle.faExclamationCircle : import_faFolderArrowDown.faFolderArrowDown }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FolderIcon, { 6141 alt: isEmpty ? "Empty folder" : "Folder with media", 6142 src: getFolderIcon() 6143 }); 6144 return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Tooltip, { 6145 ...virtualizedItemTooltipProps, 6146 title: props.folder.name, 6147 children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_material.Box, { 6148 ...getRootProps(), 6149 sx: (0, import_dist$3.combineSxProps)(cardSxProps, props.activeLibraryView === GqlClientLibraryViewType.GRID ? FolderContainerSxProps : FolderContainerListItem), 6150 "data-testid": `truffle-media-library-folder-card-${props.folder.id}`, 6151 onClick: props.onClick && (props.multiSelectEnabled ? props.onClick : (0, import_lodash.debounce)(props.onClick, 300)), 6152 "aria-selected": props.selected || props.multiSelected, 6153 "data-drop-disabled": props.dropzoneDisabled, 6154 "data-drag-pending": isYourMediaDragActive, 6155 "data-drag-active": isDragActive, 6156 "aria-invalid": isDragReject, 6157 children: [
6158 /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_material.ButtonBase, { 6159 sx: props.activeLibraryView === GqlClientLibraryViewType.GRID ? FolderButtonContainerSxProps : ButtonContainerStyleListItem, 6160 onDoubleClick: props.multiSelectEnabled ? void 0 : handleDoubleClick, 6161 disableRipple: true, 6162 children: [props.activeLibraryView === GqlClientLibraryViewType.GRID ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Thumbnail, { children: icon }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Box, { 6163 sx: { width: "120px" }, 6164 children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ThumbnailForList, { children: icon }) 6165 }), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_material.Box, { 6166 sx: props.activeLibraryView === GqlClientLibraryViewType.GRID ? { 6167 width: "100%", 6168 alignSelf: "flex-start" 6169 } : { 6170 width: "100%", 6171 display: "flex", 6172 flexDirection: "column", 6173 padding: "6px 32px 6px 12px", 6174 overflow: "hidden" 6175 }, 6176 children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Typography, { 6177 variant: "h6", 6178 sx: FolderNameSxProps(props.activeLibraryView === GqlClientLibraryViewType.GRID), 6179 children: props.folder.name 6180 }), props.activeLibraryView === GqlClientLibraryViewType.LIST && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Typography, { 6181 variant: "body1", 6182 sx: { 6183 width: "100%", 6184 alignSelf: "flex-start", 6185 textAlign: "start", 6186 color: (theme) => theme.palette.text.secondary 6187 }, 6188 children: `${media.length + folders.length} items` 6189 })] 6190 })] 6191 }),
6192 props.multiSelectEnabled && props.multiSelected && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MultiSelectCheckMark, {}), 6193 !props.multiSelectEnabled && props.activeLibraryView === GqlClientLibraryViewType.GRID && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Tooltip, { 6194 title: "Options", 6195 children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dist$3.TruffleIconButton, { 6196 onClick: handleThreeDotsMenuClick, 6197 "data-tracking-id": "tracking-id-media-lib-folder-3dots-menu", 6198 size: "small", 6199 color: "white", 6200 variant: "contained", 6201 sx: (0, import_dist$3.combineSxProps)(extraButtonContainerSxProps, { 6202 top: "4px", 6203 opacity: 0 6204 }), 6205 children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FontAwesomeIcon, { icon: import_faEllipsisV.faEllipsisV }) 6206 }) 6207 }), 6208 !props.multiSelectEnabled && props.activeLibraryView === GqlClientLibraryViewType.LIST && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Box, { 6209 sx: extraButtonContainerSxProps, 6210 children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Tooltip, { 6211 title: "Options", 6212 children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.IconButton, { 6213 sx: { opacity: 0 }, 6214 onClick: handleThreeDotsMenuClick, 6215 "data-tracking-id": "tracking-id-media-lib-folder-3dots-menu", 6216 size: "small", 6217 children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FontAwesomeIcon, { icon: import_faEllipsisV.faEllipsisV }) 6218 }) 6219 }) 6220 }) 6221 ] 6222 }) 6223 }
6223), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ConfirmAlreadyExistDialog, { 6224 open: isConfirmAlreadyExistDialogOpen, 6225 onClose: onAlreadyExistClose, 6226 onConfirm: onAlreadyExistConfirm, 6227 itemDetails: { 6228 typeDetails: { 6229 capitalizedTypeName: confirmAlreadyExistItem.current?.type === ItemType.FOLDER ? "Folder" : "Asset", 6230 article: confirmAlreadyExistItem.current?.type === ItemType.FOLDER ? "A" : "An" 6231 }, 6232 name: confirmAlreadyExistItem.current?.name 6233 }, 6234 targetFolder: props.folder, 6235 rootFolderName: "Your Media" 6236 })] }); 6237}; 6238var ButtonContainerStyleListItem = { 6239 width: "100%", 6240 height: "100%", 6241 display: "flex", 6242 flexDirection: "row", 6243 cursor: "inherit", 6244 justifyContent: "flex-start", 6245 padding: "6px 16px 6px 8px" 6246}; 6247var DropzoneIcon = (0, import_material.styled)(FontAwesomeIcon)({ 6248 height: "36px", 6249 pointerEvents: "none" 6250}); 6251var extraButtonContainerSxProps = { 6252 position: "absolute", 6253 right: "4px" 6254}; 6255var FolderContainerListItem = { 6256 padding: "6px 0px", 6257 border: "none", 6258 borderBottom: (theme) => `1px solid ${theme.palette.divider}`, 6259 display: "flex", 6260 alignItems: "center", 6261 "&:hover,div:focus-visible>&": { outline: "none" }, 6262 "&:hover": { backgroundColor: (theme) => theme.palette.action.hover }, 6263 "&[aria-selected=true]": { backgroundColor: (theme) => theme.palette.action.selected }, 6264 "[aria-grabbed=false] &[data-drag-pending=true]": { border: (theme) => `1px dashed ${theme.palette.primary.light}` }, 6265 "[aria-grabbed=false] &[data-drag-active=true]": { border: (theme) => `1px dashed ${theme.palette.primary.main}` }, 6266 "[aria-grabbed=false] &[data-drag-active=true][aria-invalid=true]": { border: (theme) => `1px dashed ${theme.palette.error.main}` } 6267}; 6268var ThumbnailForList = (0, import_material.styled)(import_material.Box)(({ theme }) => ({ 6269 flexGrow: 1, 6270 display: "flex", 6271 alignItems: "center", 6272 backgroundColor: theme.palette.grey[50], 6273 width: "120px", 6274 height: "68px", 6275 justifyContent: "center", 6276 "[aria-grabbed=false] [data-drag-pending=true] &": { 6277 backgroundColor: theme.palette.divider, 6278 color: theme.palette.primary.light 6279 }, 6280 "[aria-grabbed=false] [data-drag-active=true] &": { 6281 backgroundColor: theme.palette.divider, 6282 color: theme.palette.primary.main 6283 }, 6284 "[aria-grabbed=false] [data-drag-active=true][aria-invalid=true] &": { 6285 backgroundColor: (0, import_material.alpha)(theme.palette.error.main, theme.palette.action.focusOpacity), 6286 color: theme.palette.error.main 6287 }, 6288 border: `1px solid ${theme.palette.grey[300]}`, 6289 "[aria-selected=true] &": { 6290 outline: `2px solid ${theme.palette.primary.main}`, 6291 outlineOffset: "-1px" 6292 } 6293})); 6294//#endregion 6295//#region client/components/editor/Components/TruffleEditingWorkSpace/Components/Libraries/Components/TruffleMediaLibrary/AssetGrid/UploadCard.tsx 6296var cloudUploadIcon$1 = new URL("data:image/svg+xml,%3csvg%20width='61'%20height='43'%20viewBox='0%200%2061%2043'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M53.771%2019.5729C54.0522%2018.6354%2054.2397%2017.6979%2054.2397%2016.6666C54.2397%2010.9479%2049.4585%206.16663%2043.7397%206.16663C42.146%206.16663%2040.646%206.54163%2039.2397%207.19788C36.2397%202.97913%2031.271%200.166626%2025.7397%200.166626C16.8335%200.166626%209.61475%207.19788%209.23975%2016.0104C3.896%2017.8854%200.239746%2022.9479%200.239746%2028.6666C0.239746%2036.1666%206.23975%2042.1666%2013.7397%2042.1666H48.2397C54.8022%2042.1666%2060.2397%2036.8229%2060.2397%2030.1666C60.2397%2025.7604%2057.8022%2021.7291%2053.771%2019.5729ZM47.771%2039.1666H14.2085C8.771%2039.1666%203.80225%2035.2291%203.23975%2029.7916C2.67725%2024.5416%206.146%2019.8541%2010.9272%2018.5416C11.6772%2018.2604%2012.2397%2017.5104%2012.2397%2016.7604C12.2397%2016.7604%2012.2397%2016.7604%2012.2397%2016.6666C12.146%2011.0416%2015.7085%205.79163%2021.0522%204.01038C27.8022%201.76038%2034.0835%204.57288%2037.271%209.72913C37.7397%2010.5729%2038.9585%2010.8541%2039.896%2010.2916C41.4897%209.35413%2043.4585%208.97913%2045.521%209.44788C48.0522%2010.0104%2050.1147%2011.9791%2050.8647%2014.4166C51.4272%2016.2916%2051.2397%2018.0729%2050.5835%2019.5729C50.2085%2020.5104%2050.771%2021.5416%2051.7085%2021.8229C55.271%2023.3229%2057.6147%2026.9791%2057.146%2031.1979C56.5835%2035.8854%2052.4585%2039.1666%2047.771%2039.1666ZM23.771%2022.2916L28.7397%2017.3229V33.1666C28.7397%2034.0104%2029.396%2034.6666%2030.2397%2034.6666C30.9897%2034.6666%2031.7397%2034.0104%2031.7397%2033.1666V17.3229L36.6147%2022.2916C37.1772%2022.8541%2038.2085%2022.8541%2038.771%2022.2916C39.3335%2021.7291%2039.3335%2020.6979%2038.771%2020.1354L31.271%2012.6354C30.9897%2012.3541%2030.6147%2012.1666%2030.2397%2012.1666C29.771%2012.1666%2029.396%2012.3541%2029.1147%2012.6354L21.6147%2020.1354C21.0522%2020.6979%2021.0522%2021.7291%2021.6147%2022.2916C22.1772%2022.8541%2023.2085%2022.8541%2023.771%2022.2916Z'%20fill='url(%23paint0_linear_6233_46233)'/%3e%3cdefs%3e%3clinearGradient%20id='paint0_linear_6233_46233'%20x1='14.9766'%20y1='-2.83337'%20x2='59.0559'%20y2='26.1661'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-color='%23EB89F1'/%3e%3cstop%20offset='0.142857'%20stop-color='%23D47FEF'/%3e%3cstop%20offset='0.285714'%20stop-color='%23C175EE'/%3e%3cstop%20offset='0.428571'%20stop-color='%23AB6DEC'/%3e%3cstop%20offset='0.571429'%20stop-color='%239365EB'/%3e%3cstop%20offset='0.714286'%20stop-color='%23775EE9'/%3e%3cstop%20offset='0.857143'%20stop-color='%235358E7'/%3e%3cstop%20offset='1'%20stop-color='%230053E5'/%3e%3c/linearGradient%3e%3c/defs%3e%3c/svg%3e", "" + import.meta.url).href; 6297var UploadCard = (props) => { 6298 const inputRef = (0, import_react.useRef)(null); 6299 const imageUploadSizeLimitMB = getImageMaxUploadFileSizeMB(); 6300 const videoUploadSizeLimitMB = getVideoMaxUploadFileSizeMB(); 6301 return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_material.Box, { 6302 sx: props.sxProps, 6303 children: [
6304 /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CloudUploadIcon, { 6305 src: cloudUploadIcon$1, 6306 alt: "Cloud Upload", 6307 marginBottom: props.activeLibraryView === GqlClientLibraryViewType.GRID ? 8 : 0, 6308 width: props.activeLibraryView === GqlClientLibraryViewType.GRID ? 36 : 24 6309 }), 6310 /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_material.Typography, { 6311 variant: "caption", 6312 color: "text.secondary", 6313 align: "center", 6314 children: ["Drop your media here or", /* @__PURE__ */ (0, import_jsx_runtime.jsx)("br", {})] 6315 }), 6316 /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_material.Typography, { 6317 variant: "caption", 6318 color: "text.secondary", 6319 align: "center", 6320 children: [ 6321 /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Link, { 6322 variant: "caption", 6323 color: "primary.dark", 6324 "data-tracking-id": "tracking-id-media-lib-browse-computer", 6325 onClick: () => inputRef?.current.click(), 6326 children: "browse" 6327 }), 6328 /* @__PURE__ */ (0, import_jsx_runtime.jsx)("input", { 6329 ref: inputRef, 6330 hidden: true, 6331 accept: [...fileExtByMediaType[AcceptedFileTypes.Image.toLowerCase()], ...fileExtByMediaType[AcceptedFileTypes.Video.toLowerCase()]].join(","), 6332 type: "file", 6333 onChange: props.onUpload, 6334 multiple: true 6335 }), 6336 /* @__PURE__ */ (0, import_jsx_runtime.jsx)(NoMaxWidthTooltip, { 6337 placement: "top", 6338 title: uploadTipElement(imageUploadSizeLimitMB, videoUploadSizeLimitMB), 6339 arrow: true, 6340 children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Box, { 6341 component: "span", 6342 children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FontAwesomeIcon, { 6343 icon: import_faInfoCircle.faInfoCircle, 6344 style: { 6345 fontSize: "8px", 6346 marginLeft: "4px" 6347 } 6348 }) 6349 }) 6350 }) 6351 ] 6352 }) 6353 ] 6354 }); 6355}; 6356var CloudUploadIcon = (0, import_material.styled)("img", { shouldForwardProp: (prop) => prop !== "marginBottom" })` 6357 width: ${({ width }) => `${width}px`}; 6358 margin-bottom: ${({ marginBottom }) => `${marginBottom}px`}; 6359`; 6360var uploadTipElement = (imageUploadSizeLimitMB, videoUploadSizeLimitMB) => { 6361 return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_material.Box, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_material.Typography, { 6362 variant: "tooltip", 6363 color: "common.white", 6364 align: "center", 6365 component: "p", 6366 children: [ 6367 "Image format: jpg, png, gif. Size: Up to ", 6368 imageUploadSizeLimitMB, 6369 "MB" 6370 ] 6371 }
6371), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_material.Typography, { 6372 variant: "tooltip", 6373 color: "common.white", 6374 align: "center", 6375 component: "p", 6376 children: [ 6377 "Video format: mov, flv, mp4, webm. Size: Up to $", 6378 videoUploadSizeLimitMB, 6379 "MB" 6380 ] 6381 })] }); 6382}; 6383var NoMaxWidthTooltip = (0, import_material.styled)(({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Tooltip, { 6384 ...props, 6385 classes: { popper: className } 6386}))({ [`& .${import_material.tooltipClasses.tooltip}`]: { maxWidth: "none" } }); 6387//#endregion 6388//#region node_modules/masonic/dist/module/interval-tree.js 6389var RED = 0; 6390var BLACK = 1; 6391var NIL = 2; 6392var DELETE = 0; 6393var KEEP = 1; 6394function addInterval(treeNode, high, index) { 6395 let node = treeNode.list; 6396 let prevNode; 6397 while (node) { 6398 if (node.index === index) return false; 6399 if (high > node.high) break; 6400 prevNode = node; 6401 node = node.next; 6402 } 6403 if (!prevNode) treeNode.list = { 6404 index, 6405 high, 6406 next: node 6407 }; 6408 if (prevNode) prevNode.next = { 6409 index, 6410 high, 6411 next: prevNode.next 6412 }; 6413 return true; 6414} 6415function removeInterval(treeNode, index) { 6416 let node = treeNode.list; 6417 if (node.index === index) { 6418 if (node.next === null) return DELETE; 6419 treeNode.list = node.next; 6420 return KEEP; 6421 } 6422 let prevNode = node; 6423 node = node.next; 6424 while (node !== null) { 6425 if (node.index === index) { 6426 prevNode.next = node.next; 6427 return KEEP; 6428 } 6429 prevNode = node; 6430 node = node.next; 6431 } 6432} 6433var NULL_NODE = { 6434 low: 0, 6435 max: 0, 6436 high: 0, 6437 C: NIL, 6438 P: void 0, 6439 R: void 0, 6440 L: void 0, 6441 list: void 0 6442}; 6443NULL_NODE.P = NULL_NODE; 6444NULL_NODE.L = NULL_NODE; 6445NULL_NODE.R = NULL_NODE; 6446function updateMax(node) { 6447 const max = node.high; 6448 if (node.L === NULL_NODE && node.R === NULL_NODE) node.max = max; 6449 else if (node.L === NULL_NODE) node.max = Math.max(node.R.max, max); 6450 else if (node.R === NULL_NODE) node.max = Math.max(node.L.max, max); 6451 else node.max = Math.max(Math.max(node.L.max, node.R.max), max); 6452} 6453function updateMaxUp(node) { 6454 let x = node; 6455 while (x.P !== NULL_NODE) { 6456 updateMax(x.P); 6457 x = x.P; 6458 } 6459} 6460function rotateLeft(tree, x) { 6461 if (x.R === NULL_NODE) return; 6462 const y = x.R; 6463 x.R = y.L; 6464 if (y.L !== NULL_NODE) y.L.P = x; 6465 y.P = x.P; 6466 if (x.P === NULL_NODE) tree.root = y; 6467 else if (x === x.P.L) x.P.L = y; 6468 else x.P.R = y; 6469 y.L = x; 6470 x.P = y; 6471 updateMax(x); 6472 updateMax(y); 6473} 6474function rotateRight(tree, x) { 6475 if (x.L === NULL_NODE) return; 6476 const y = x.L; 6477 x.L = y.R; 6478 if (y.R !== NULL_NODE) y.R.P = x; 6479 y.P = x.P; 6480 if (x.P === NULL_NODE) tree.root = y; 6481 else if (x === x.P.R) x.P.R = y; 6482 else x.P.L = y; 6483 y.R = x; 6484 x.P = y; 6485 updateMax(x); 6486 updateMax(y); 6487} 6488function replaceNode(tree, x, y) { 6489 if (x.P === NULL_NODE) tree.root = y; 6490 else if (x === x.P.L) x.P.L = y; 6491 else x.P.R = y; 6492 y.P = x.P; 6493} 6494function fixRemove(tree, x) { 6495 let w; 6496 while (x !== NULL_NODE && x.C === BLACK) if (x === x.P.L) { 6497 w = x.P.R; 6498 if (w.C === RED) { 6499 w.C = BLACK; 6500 x.P.C = RED; 6501 rotateLeft(tree, x.P); 6502 w = x.P.R; 6503 } 6504 if (w.L.C === BLACK && w.R.C === BLACK) { 6505 w.C = RED; 6506 x = x.P; 6507 } else { 6508 if (w.R.C === BLACK) { 6509 w.L.C = BLACK; 6510 w.C = RED; 6511 rotateRight(tree, w); 6512 w = x.P.R; 6513 } 6514 w.C = x.P.C; 6515 x.P.C = BLACK; 6516 w.R.C = BLACK; 6517 rotateLeft(tree, x.P); 6518 x = tree.root; 6519 } 6520 } else { 6521 w = x.P.L; 6522 if (w.C === RED) { 6523 w.C = BLACK; 6524 x.P.C = RED; 6525 rotateRight(tree, x.P); 6526 w = x.P.L; 6527 } 6528 if (w.R.C === BLACK && w.L.C === BLACK) { 6529 w.C = RED; 6530 x = x.P; 6531 } else { 6532 if (w.L.C === BLACK) { 6533 w.R.C = BLACK; 6534 w.C = RED; 6535 rotateLeft(tree, w); 6536 w = x.P.L; 6537 } 6538 w.C = x.P.C; 6539 x.P.C = BLACK; 6540 w.L.C = BLACK; 6541 rotateRight(tree, x.P); 6542 x = tree.root; 6543 } 6544 } 6545 x.C = BLACK; 6546} 6547function minimumTree(x) { 6548 while (x.L !== NULL_NODE) x = x.L; 6549 return x; 6550} 6551function fixInsert(tree, z) { 6552 let y; 6553 while (z.P.C === RED) if (z.P === z.P.P.L) { 6554 y = z.P.P.R; 6555 if (y.C === RED) { 6556 z.P.C = BLACK; 6557 y.C = BLACK; 6558 z.P.P.C = RED; 6559 z = z.P.P; 6560 } else { 6561 if (z === z.P.R) { 6562 z = z.P; 6563 rotateLeft(tree, z); 6564 } 6565 z.P.C = BLACK; 6566 z.P.P.C = RED; 6567 rotateRight(tree, z.P.P); 6568 } 6569 } else { 6570 y = z.P.P.L; 6571 if (y.C === RED) { 6572 z.P.C = BLACK; 6573 y.C = BLACK; 6574 z.P.P.C = RED; 6575 z = z.P.P; 6576 } else { 6577 if (z === z.P.L) { 6578 z = z.P; 6579 rotateRight(tree, z); 6580 } 6581 z.P.C = BLACK; 6582 z.P.P.C = RED; 6583 rotateLeft(tree, z.P.P); 6584 } 6585 } 6586 tree.root.C = BLACK; 6587} 6588function createIntervalTree() { 6589 const tree = { 6590 root: NULL_NODE, 6591 size: 0 6592 }; 6593 const indexMap = {}; 6594 return { 6595 insert(low, high, index) { 6596 let x = tree.root;
6597 let y = NULL_NODE; 6598 while (x !== NULL_NODE) { 6599 y = x; 6600 if (low === y.low) break; 6601 if (low < x.low) x = x.L; 6602 else x = x.R; 6603 } 6604 if (low === y.low && y !== NULL_NODE) { 6605 if (!addInterval(y, high, index)) return; 6606 y.high = Math.max(y.high, high); 6607 updateMax(y); 6608 updateMaxUp(y); 6609 indexMap[index] = y; 6610 tree.size++; 6611 return; 6612 } 6613 const z = { 6614 low, 6615 high, 6616 max: high, 6617 C: RED, 6618 P: y, 6619 L: NULL_NODE, 6620 R: NULL_NODE, 6621 list: { 6622 index, 6623 high, 6624 next: null 6625 } 6626 }; 6627 if (y === NULL_NODE) tree.root = z; 6628 else { 6629 if (z.low < y.low) y.L = z; 6630 else y.R = z; 6631 updateMaxUp(z); 6632 } 6633 fixInsert(tree, z); 6634 indexMap[index] = z; 6635 tree.size++; 6636 }, 6637 remove(index) { 6638 const z = indexMap[index]; 6639 if (z === void 0) return; 6640 delete indexMap[index]; 6641 const intervalResult = removeInterval(z, index); 6642 if (intervalResult === void 0) return; 6643 if (intervalResult === KEEP) { 6644 z.high = z.list.high; 6645 updateMax(z); 6646 updateMaxUp(z); 6647 tree.size--; 6648 return; 6649 } 6650 let y = z; 6651 let originalYColor = y.C; 6652 let x; 6653 if (z.L === NULL_NODE) { 6654 x = z.R; 6655 replaceNode(tree, z, z.R); 6656 } else if (z.R === NULL_NODE) { 6657 x = z.L; 6658 replaceNode(tree, z, z.L); 6659 } else { 6660 y = minimumTree(z.R); 6661 originalYColor = y.C; 6662 x = y.R; 6663 if (y.P === z) x.P = y; 6664 else { 6665 replaceNode(tree, y, y.R); 6666 y.R = z.R; 6667 y.R.P = y; 6668 } 6669 replaceNode(tree, z, y); 6670 y.L = z.L; 6671 y.L.P = y; 6672 y.C = z.C; 6673 } 6674 updateMax(x); 6675 updateMaxUp(x); 6676 if (originalYColor === BLACK) fixRemove(tree, x); 6677 tree.size--; 6678 }, 6679 search(low, high, callback) { 6680 const stack = [tree.root]; 6681 while (stack.length !== 0) { 6682 const node = stack.pop(); 6683 if (node === NULL_NODE || low > node.max) continue; 6684 if (node.L !== NULL_NODE) stack.push(node.L); 6685 if (node.R !== NULL_NODE) stack.push(node.R); 6686 if (node.low <= high && node.high >= low) { 6687 let curr = node.list; 6688 while (curr !== null) { 6689 if (curr.high >= low) callback(curr.index, node.low); 6690 curr = curr.next; 6691 } 6692 } 6693 } 6694 }, 6695 get size() { 6696 return tree.size; 6697 } 6698 }; 6699} 6700//#endregion 6701//#region node_modules/@react-hook/latest/dist/module/index.js 6702var useLatest = (current) => { 6703 const storedValue = import_react.useRef(current); 6704 import_react.useEffect(() => { 6705 storedValue.current = current; 6706 }); 6707 return storedValue; 6708}; 6709//#endregion 6710//#region node_modules/@react-hook/event/dist/module/index.js 6711function useEvent(target, type, listener, cleanup) { 6712 const storedListener = import_react.useRef(listener); 6713 const storedCleanup = import_react.useRef(cleanup); 6714 import_react.useEffect(() => { 6715 storedListener.current = listener; 6716 storedCleanup.current = cleanup; 6717 }); 6718 import_react.useEffect(() => { 6719 const targetEl = target && "current" in target ? target.current : target; 6720 if (!targetEl) return; 6721 let didUnsubscribe = 0; 6722 function listener(...args) { 6723 if (didUnsubscribe) return; 6724 storedListener.current.apply(this, args); 6725 } 6726 targetEl.addEventListener(type, listener); 6727 const cleanup = storedCleanup.current; 6728 return () => { 6729 didUnsubscribe = 1; 6730 targetEl.removeEventListener(type, listener); 6731 cleanup && cleanup(); 6732 }; 6733 }, [target, type]); 6734} 6735//#endregion 6736//#region node_modules/@essentials/memoize-one/dist/module/index.js 6737var memoOne = (fn, areEqual) => { 6738 const equal = areEqual || defaultAreEqual; 6739 let args, value; 6740 return function() { 6741 return !!args && equal(arguments, args) ? value : value = fn.apply(null, args = arguments); 6742 }; 6743}; 6744var defaultAreEqual = (current, prev) => current[0] === prev[0] && current[1] === prev[1] && current[2] === prev[2] && current[3] === prev[3]; 6745//#endregion 6746//#region node_modules/@essentials/one-key-map/dist/module/index.js 6747var OneKeyMap = class { 6748 constructor() { 6749 this.set = void 0; 6750 this.get = void 0; 6751 let key, val; 6752 this.get = (k) => k === key ? val : void 0; 6753 this.set = (k, v) => { 6754 key = k; 6755 val = v; 6756 }; 6757 } 6758}; 6759//#endregion 6760//#region node_modules/trie-memoize/dist/module/index.js 6761var createCache = (obj) => { 6762 try { 6763 return new obj(); 6764 } catch (e) { 6765 const cache = {}; 6766 return { 6767 set(k, v) { 6768 cache[k] = v; 6769 }, 6770 get(k) { 6771 return cache[k]; 6772 } 6773 }; 6774 } 6775}; 6776var memo = (constructors) => { 6777 const depth = constructors.length, baseCache = createCache(constructors[0]); 6778 let base; 6779 let map; 6780 let i; 6781 let node; 6782 const one = depth === 1; 6783 const g1 = (args) => (base = baseCache.get(args[0])) === void 0 || one ? base : base.get(args[1]); 6784 const s1 = (args, value) => { 6785 if (one) baseCache.set(args[0], value); 6786 else if ((base = baseCache.get(args[0])) === void 0) { 6787 map = createCache(constructors[1]); 6788 map.set(args[1], value); 6789 baseCache.set(args[0], map); 6790 } else base.set(args[1], value); 6791 return value; 6792 }; 6793 const g2 = (args) => { 6794 node = baseCache; 6795 for (i = 0; i < depth; i++) if ((node = node.get(args[i])) === void 0) return; 6796 return node; 6797 }; 6798 const s2 = (args, value) => { 6799 node = baseCache; 6800 for (i = 0; i < depth - 1; i++) if ((map = node.get(args[i])) === void 0) { 6801 map = createCache(constructors[i + 1]); 6802 node.set(args[i], map); 6803 node = map; 6804 } else node = map; 6805 node.set(args[depth - 1], value); 6806 return value; 6807 }; 6808 return depth < 3 ? { 6809 g: g1, 6810 s: s1 6811 } : { 6812 g: g2, 6813 s: s2 6814 }; 6815}; 6816var memoize = (mapConstructors, fn) => { 6817 let item; 6818 const { g, s } = memo(mapConstructors); 6819 return function() { 6820 return (item = g(arguments)) === void 0 ? s(arguments, fn.apply(null, arguments)) : item; 6821 }; 6822}; 6823//#endregion 6824//#region node_modules/masonic/dist/module/elements-cache.js 6825var elementsCache = /*#__PURE__*/ new WeakMap(); 6826//#endregion 6827//#region node_modules/masonic/dist/module/use-force-update.js 6828function useForceUpdate() { 6829 const setState = import_react.useState(emptyObj$1)[1]; 6830 return import_react.useRef(() => setState({})).current; 6831} 6832var emptyObj$1 = {}; 6833//#endregion 6834//#region node_modules/masonic/dist/module/use-masonry.js 6835var __reactCreateElement__ = import_react.createElement; 6836/** 6837* This hook handles the render phases of the masonry layout and returns the grid as a React element. 6838*
6839* @param options - Options for configuring the masonry layout renderer. See `UseMasonryOptions`. 6840* @param options.positioner 6841* @param options.resizeObserver 6842* @param options.items 6843* @param options.as 6844* @param options.id 6845* @param options.className 6846* @param options.style 6847* @param options.role 6848* @param options.tabIndex 6849* @param options.containerRef 6850* @param options.itemAs 6851* @param options.itemStyle 6852* @param options.itemHeightEstimate 6853* @param options.itemKey 6854* @param options.overscanBy 6855* @param options.scrollTop 6856* @param options.isScrolling 6857* @param options.height 6858* @param options.render 6859* @param options.onRender 6860*/ 6861function useMasonry(_ref) { 6862 let { positioner, resizeObserver, items, as: ContainerComponent = "div", id, className, style, role = "grid", tabIndex = 0, containerRef, itemAs: ItemComponent = "div", itemStyle, itemHeightEstimate = 300, itemKey = defaultGetItemKey, overscanBy = 2, scrollTop, isScrolling, height, render: RenderComponent, onRender } = _ref; 6863 let startIndex = 0; 6864 let stopIndex; 6865 const forceUpdate = useForceUpdate(); 6866 const setItemRef = getRefSetter(positioner, resizeObserver); 6867 const itemCount = items.length; 6868 const { columnWidth, columnCount, range, estimateHeight, size, shortestColumn } = positioner; 6869 const measuredCount = size(); 6870 const shortestColumnSize = shortestColumn(); 6871 const children = []; 6872 const itemRole = role === "list" ? "listitem" : role === "grid" ? "gridcell" : void 0; 6873 const storedOnRender = useLatest(onRender); 6874 overscanBy = height * overscanBy; 6875 const rangeEnd = scrollTop + overscanBy; 6876 const needsFreshBatch = shortestColumnSize < rangeEnd && measuredCount < itemCount; 6877 range(Math.max(0, scrollTop - overscanBy / 2), rangeEnd, (index, left, top) => { 6878 const data = items[index]; 6879 const key = itemKey(data, index); 6880 const phaseTwoStyle = { 6881 top, 6882 left, 6883 width: columnWidth, 6884 writingMode: "horizontal-tb", 6885 position: "absolute" 6886 }; 6887 children.push(/*#__PURE__*/ __reactCreateElement__(ItemComponent, { 6888 key, 6889 ref: setItemRef(index), 6890 role: itemRole, 6891 style: typeof itemStyle === "object" && itemStyle !== null ? Object.assign({}, phaseTwoStyle, itemStyle) : phaseTwoStyle 6892 }, createRenderElement(RenderComponent, index, data, columnWidth))); 6893 if (stopIndex === void 0) { 6894 startIndex = index; 6895 stopIndex = index; 6896 } else { 6897 startIndex = Math.min(startIndex, index); 6898 stopIndex = Math.max(stopIndex, index); 6899 } 6900 }); 6901 if (needsFreshBatch) { 6902 const batchSize = Math.min(itemCount - measuredCount, Math.ceil((scrollTop + overscanBy - shortestColumnSize) / itemHeightEstimate * columnCount)); 6903 let index = measuredCount; 6904 const phaseOneStyle = getCachedSize(columnWidth); 6905 for (; index < measuredCount + batchSize; index++) { 6906 const data = items[index]; 6907 const key = itemKey(data, index); 6908 children.push(/*#__PURE__*/ __reactCreateElement__(ItemComponent, { 6909 key, 6910 ref: setItemRef(index), 6911 role: itemRole, 6912 style: typeof itemStyle === "object" ? Object.assign({}, phaseOneStyle, itemStyle) : phaseOneStyle 6913 }, createRenderElement(RenderComponent, index, data, columnWidth))); 6914 } 6915 } 6916 import_react.useEffect(() => { 6917 if (typeof storedOnRender.current === "function" && stopIndex !== void 0) storedOnRender.current(startIndex, stopIndex, items); 6918 didEverMount = "1"; 6919 }, [ 6920 startIndex, 6921 stopIndex, 6922 items, 6923 storedOnRender 6924 ]); 6925 import_react.useEffect(() => { 6926 if (needsFreshBatch) forceUpdate(); 6927 }, [needsFreshBatch, positioner]); 6928 const containerStyle = getContainerStyle(isScrolling, estimateHeight(itemCount, itemHeightEstimate)); 6929 return /*#__PURE__*/ __reactCreateElement__(ContainerComponent, { 6930 ref: containerRef, 6931 key: didEverMount, 6932 id, 6933 role, 6934 className, 6935 tabIndex, 6936 style: typeof style === "object" ? assignUserStyle(containerStyle, style) : containerStyle, 6937 children 6938 }); 6939} 6940var didEverMount = "0"; 6941var createRenderElement = /*#__PURE__*/ memoize([ 6942 OneKeyMap, 6943 {}, 6944 WeakMap, 6945 OneKeyMap 6946], (RenderComponent, index, data, columnWidth) => /*#__PURE__*/ __reactCreateElement__(RenderComponent, { 6947 index, 6948 data, 6949 width: columnWidth 6950})); 6951var getContainerStyle = /*#__PURE__*/ memoOne((isScrolling, estimateHeight) => ({ 6952 position: "relative", 6953 width: "100%", 6954 maxWidth: "100%",
6955 height: Math.ceil(estimateHeight), 6956 maxHeight: Math.ceil(estimateHeight), 6957 willChange: isScrolling ? "contents" : void 0, 6958 pointerEvents: isScrolling ? "none" : void 0 6959})); 6960var cmp2 = (args, pargs) => args[0] === pargs[0] && args[1] === pargs[1]; 6961var assignUserStyle = /*#__PURE__*/ memoOne((containerStyle, userStyle) => Object.assign({}, containerStyle, userStyle), cmp2); 6962function defaultGetItemKey(_, i) { 6963 return i; 6964} 6965var getCachedSize = /*#__PURE__*/ memoOne((width) => ({ 6966 width, 6967 zIndex: -1e3, 6968 visibility: "hidden", 6969 position: "absolute", 6970 writingMode: "horizontal-tb" 6971}), (args, pargs) => args[0] === pargs[0]); 6972var getRefSetter = /*#__PURE__*/ memoOne((positioner, resizeObserver) => (index) => (el) => { 6973 if (el === null) return; 6974 if (resizeObserver) { 6975 resizeObserver.observe(el); 6976 elementsCache.set(el, index); 6977 } 6978 if (positioner.get(index) === void 0) positioner.set(index, el.offsetHeight); 6979}, cmp2); 6980//#endregion 6981//#region node_modules/@essentials/raf/dist/module/index.js 6982var u = "undefined"; 6983var win = typeof window !== u ? window : {}; 6984var p = typeof performance !== u ? performance : Date; 6985var now$1 = () => p.now(); 6986var Caf = "cancelAnimationFrame"; 6987var Raf = "requestAnimationFrame"; 6988var raf = win[Raf] && /*#__PURE__*/ win[Raf].bind(win); 6989var caf = win[Caf] && /*#__PURE__*/ win[Caf].bind(win); 6990function _ref(h) { 6991 return clearTimeout(h); 6992} 6993if (!raf || !caf) { 6994 let lastTime = 0; 6995 raf = (callback) => { 6996 let curr = now$1(), next = Math.max(lastTime + 1e3 / 60, curr); 6997 return setTimeout(() => { 6998 callback(lastTime = next); 6999 }, next - curr); 7000 }; 7001 caf = _ref; 7002} 7003//#endregion 7004//#region node_modules/@essentials/request-timeout/dist/module/index.js 7005/** 7006* Copyright 2011, Joe Lambert. 7007* Free to use under the MIT license. 7008* http://www.opensource.org/licenses/mit-license.php 7009**/ 7010var clearRequestTimeout = (handle) => { 7011 caf(handle.v || -1); 7012}; 7013var requestTimeout = (fn, ms) => { 7014 const start = now$1(), handle = {}; 7015 const loop = () => { 7016 now$1() - start >= ms ? fn.call(null) : handle.v = raf(loop); 7017 }; 7018 handle.v = raf(loop); 7019 return handle; 7020}; 7021//#endregion 7022//#region node_modules/@react-hook/throttle/dist/module/index.js 7023var perf = typeof performance !== "undefined" ? performance : Date; 7024var now = () => perf.now(); 7025function useThrottleCallback(callback, fps = 30, leading = false) { 7026 const storedCallback = useLatest(callback); 7027 const ms = 1e3 / fps; 7028 const prev = import_react.useRef(0); 7029 const trailingTimeout = import_react.useRef(); 7030 const clearTrailing = () => trailingTimeout.current && clearTimeout(trailingTimeout.current); 7031 const deps = [ 7032 fps, 7033 leading, 7034 storedCallback 7035 ]; 7036 function _ref() { 7037 prev.current = 0; 7038 clearTrailing(); 7039 } 7040 import_react.useEffect(() => _ref, deps); 7041 return import_react.useCallback(function() { 7042 const args = arguments; 7043 const rightNow = now(); 7044 const call = () => { 7045 prev.current = rightNow; 7046 clearTrailing(); 7047 storedCallback.current.apply(null, args); 7048 }; 7049 const current = prev.current; 7050 if (leading && current === 0) return call(); 7051 if (rightNow - current > ms) { 7052 if (current > 0) return call(); 7053 prev.current = rightNow; 7054 } 7055 clearTrailing(); 7056 trailingTimeout.current = setTimeout(() => { 7057 call(); 7058 prev.current = 0; 7059 }, ms); 7060 }, deps); 7061} 7062function useThrottle(initialState, fps, leading) { 7063 const state = import_react.useState(initialState); 7064 return [state[0], useThrottleCallback(state[1], fps, leading)]; 7065} 7066//#endregion 7067//#region node_modules/@react-hook/passive-layout-effect/dist/module/index.js 7068var usePassiveLayoutEffect = import_react.default[typeof document !== "undefined" && document.createElement !== void 0 ? "useLayoutEffect" : "useEffect"]; 7069//#endregion 7070//#region node_modules/masonic/dist/module/use-positioner.js 7071/** 7072* This hook creates the grid cell positioner and cache required by `useMasonry()`. This is 7073* the meat of the grid's layout algorithm, determining which cells to render at a given scroll 7074* position, as well as where to place new items in the grid. 7075* 7076* @param options - Properties that determine the number of columns in the grid, as well 7077* as their widths. 7078* @param options.columnWidth 7079* @param options.width 7080* @param deps - This hook will create a new positioner, clearing all existing cached positions, 7081* whenever the dependencies in this list change. 7082* @param options.columnGutter 7083* @param options.rowGutter 7084* @param options.columnCount 7085* @param options.maxColumnCount 7086*/ 7087function usePositioner(_ref, deps) { 7088 let { width, columnWidth = 200, columnGutter = 0, rowGutter, columnCount, maxColumnCount } = _ref; 7089 if (deps === void 0) deps = emptyArr; 7090 const initPositioner = () => { 7091 const [computedColumnWidth, computedColumnCount] = getColumns(width, columnWidth, columnGutter, columnCount, maxColumnCount); 7092 return createPositioner(computedColumnCount, computedColumnWidth, columnGutter, rowGutter !== null && rowGutter !== void 0 ? rowGutter : columnGutter); 7093 }; 7094 const positionerRef = import_react.useRef(); 7095 if (positionerRef.current === void 0) positionerRef.current = initPositioner(); 7096 const prevDeps = import_react.useRef(deps); 7097 const opts = [ 7098 width, 7099 columnWidth, 7100 columnGutter, 7101 rowGutter, 7102 columnCount, 7103 maxColumnCount 7104 ]; 7105 const prevOpts = import_react.useRef(opts); 7106 const optsChanged = !opts.every((item, i) => prevOpts.current[i] === item); 7107 if (optsChanged || !deps.every((item, i) => prevDeps.current[i] === item)) { 7108 const prevPositioner = positionerRef.current; 7109 const positioner = initPositioner(); 7110 prevDeps.current = deps; 7111 prevOpts.current = opts; 7112 if (optsChanged) { 7113 const cacheSize = prevPositioner.size(); 7114 for (let index = 0; index < cacheSize; index++) { 7115 const pos = prevPositioner.get(index); 7116 positioner.set(index, pos !== void 0 ? pos.height : 0); 7117 } 7118 } 7119 positionerRef.current = positioner; 7120 } 7121 return positionerRef.current; 7122} 7123/** 7124* Creates a cell positioner for the `useMasonry()` hook. The `usePositioner()` hook uses 7125* this utility under the hood. 7126* 7127* @param columnCount - The number of columns in the grid 7128* @param columnWidth - The width of each column in the grid 7129* @param columnGutter - The amount of horizontal space between columns in pixels. 7130* @param rowGutter - The amount of vertical space between cells within a column in pixels (falls back 7131* to `columnGutter`). 7132*/ 7133var createPositioner = function(columnCount, columnWidth, columnGutter, rowGutter) { 7134 if (columnGutter === void 0) columnGutter = 0; 7135 if (rowGutter === void 0) rowGutter = columnGutter; 7136 const intervalTree = createIntervalTree(); 7137 const columnHeights = new Array(columnCount); 7138 const items = []; 7139 const columnItems = new Array(columnCount); 7140 for (let i = 0; i < columnCount; i++) { 7141 columnHeights[i] = 0; 7142 columnItems[i] = []; 7143 } 7144 return { 7145 columnCount, 7146 columnWidth, 7147 set: function(index, height) { 7148 if (height === void 0) height = 0; 7149 let column = 0; 7150 for (let i = 1; i < columnHeights.length; i++) if (columnHeights[i] < columnHeights[column]) column = i; 7151 const top = columnHeights[column] || 0; 7152 columnHeights[column] = top + height + rowGutter;
7153 columnItems[column].push(index); 7154 items[index] = { 7155 left: column * (columnWidth + columnGutter), 7156 top, 7157 height, 7158 column 7159 }; 7160 intervalTree.insert(top, top + height, index); 7161 }, 7162 get: (index) => items[index], 7163 update: (updates) => { 7164 const columns = new Array(columnCount); 7165 let i = 0, j = 0; 7166 for (; i < updates.length - 1; i++) { 7167 const index = updates[i]; 7168 const item = items[index]; 7169 item.height = updates[++i]; 7170 intervalTree.remove(index); 7171 intervalTree.insert(item.top, item.top + item.height, index); 7172 columns[item.column] = columns[item.column] === void 0 ? index : Math.min(index, columns[item.column]); 7173 } 7174 for (i = 0; i < columns.length; i++) { 7175 if (columns[i] === void 0) continue; 7176 const itemsInColumn = columnItems[i]; 7177 const startIndex = binarySearch(itemsInColumn, columns[i]); 7178 const index = columnItems[i][startIndex]; 7179 const startItem = items[index]; 7180 columnHeights[i] = startItem.top + startItem.height + rowGutter; 7181 for (j = startIndex + 1; j < itemsInColumn.length; j++) { 7182 const index = itemsInColumn[j]; 7183 const item = items[index]; 7184 item.top = columnHeights[i]; 7185 columnHeights[i] = item.top + item.height + rowGutter; 7186 intervalTree.remove(index); 7187 intervalTree.insert(item.top, item.top + item.height, index); 7188 } 7189 } 7190 }, 7191 range: (lo, hi, renderCallback) => intervalTree.search(lo, hi, (index, top) => renderCallback(index, items[index].left, top)), 7192 estimateHeight: (itemCount, defaultItemHeight) => { 7193 const tallestColumn = Math.max(0, Math.max.apply(null, columnHeights)); 7194 return itemCount === intervalTree.size ? tallestColumn : tallestColumn + Math.ceil((itemCount - intervalTree.size) / columnCount) * defaultItemHeight; 7195 }, 7196 shortestColumn: () => { 7197 if (columnHeights.length > 1) return Math.min.apply(null, columnHeights); 7198 return columnHeights[0] || 0; 7199 }, 7200 size() { 7201 return intervalTree.size; 7202 }, 7203 all() { 7204 return items; 7205 } 7206 }; 7207}; 7208/* istanbul ignore next */ 7209var binarySearch = (a, y) => { 7210 let l = 0; 7211 let h = a.length - 1; 7212 while (l <= h) { 7213 const m = l + h >>> 1; 7214 const x = a[m]; 7215 if (x === y) return m; 7216 else if (x <= y) l = m + 1; 7217 else h = m - 1; 7218 } 7219 return -1; 7220}; 7221var getColumns = function(width, minimumWidth, gutter, columnCount, maxColumnCount) { 7222 if (width === void 0) width = 0; 7223 if (minimumWidth === void 0) minimumWidth = 0; 7224 if (gutter === void 0) gutter = 8; 7225 columnCount = columnCount || Math.min(Math.floor((width + gutter) / (minimumWidth + gutter)), maxColumnCount || Infinity) || 1; 7226 return [Math.floor((width - gutter * (columnCount - 1)) / columnCount), columnCount]; 7227}; 7228var emptyArr = []; 7229//#endregion 7230//#region node_modules/@juggle/resize-observer/lib/utils/resizeObservers.js 7231var resizeObservers = []; 7232//#endregion 7233//#region node_modules/@juggle/resize-observer/lib/algorithms/hasActiveObservations.js 7234var hasActiveObservations = function() { 7235 return resizeObservers.some(function(ro) { 7236 return ro.activeTargets.length > 0; 7237 }); 7238}; 7239//#endregion 7240//#region node_modules/@juggle/resize-observer/lib/algorithms/hasSkippedObservations.js 7241var hasSkippedObservations = function() { 7242 return resizeObservers.some(function(ro) { 7243 return ro.skippedTargets.length > 0; 7244 }); 7245}; 7246//#endregion 7247//#region node_modules/@juggle/resize-observer/lib/algorithms/deliverResizeLoopError.js 7248var msg = "ResizeObserver loop completed with undelivered notifications."; 7249var deliverResizeLoopError = function() { 7250 var event; 7251 if (typeof ErrorEvent === "function") event = new ErrorEvent("error", { message: msg }); 7252 else { 7253 event = document.createEvent("Event"); 7254 event.initEvent("error", false, false); 7255 event.message = msg; 7256 } 7257 window.dispatchEvent(event); 7258}; 7259//#endregion 7260//#region node_modules/@juggle/resize-observer/lib/ResizeObserverBoxOptions.js 7261var ResizeObserverBoxOptions; 7262(function(ResizeObserverBoxOptions) { 7263 ResizeObserverBoxOptions["BORDER_BOX"] = "border-box"; 7264 ResizeObserverBoxOptions["CONTENT_BOX"] = "content-box"; 7265 ResizeObserverBoxOptions["DEVICE_PIXEL_CONTENT_BOX"] = "device-pixel-content-box"; 7266})(ResizeObserverBoxOptions || (ResizeObserverBoxOptions = {})); 7267//#endregion 7268//#region node_modules/@juggle/resize-observer/lib/utils/freeze.js 7269var freeze = function(obj) { 7270 return Object.freeze(obj); 7271}; 7272//#endregion 7273//#region node_modules/@juggle/resize-observer/lib/ResizeObserverSize.js 7274var ResizeObserverSize = function() { 7275 function ResizeObserverSize(inlineSize, blockSize) { 7276 this.inlineSize = inlineSize; 7277 this.blockSize = blockSize; 7278 freeze(this); 7279 } 7280 return ResizeObserverSize; 7281}(); 7282//#endregion 7283//#region node_modules/@juggle/resize-observer/lib/DOMRectReadOnly.js 7284var DOMRectReadOnly = function() { 7285 function DOMRectReadOnly(x, y, width, height) { 7286 this.x = x; 7287 this.y = y; 7288 this.width = width; 7289 this.height = height; 7290 this.top = this.y; 7291 this.left = this.x; 7292 this.bottom = this.top + this.height; 7293 this.right = this.left + this.width; 7294 return freeze(this); 7295 } 7296 DOMRectReadOnly.prototype.toJSON = function() { 7297 var _a = this; 7298 return { 7299 x: _a.x, 7300 y: _a.y, 7301 top: _a.top, 7302 right: _a.right, 7303 bottom: _a.bottom, 7304 left: _a.left, 7305 width: _a.width, 7306 height: _a.height 7307 }; 7308 }; 7309 DOMRectReadOnly.fromRect = function(rectangle) { 7310 return new DOMRectReadOnly(rectangle.x, rectangle.y, rectangle.width, rectangle.height); 7311 }; 7312 return DOMRectReadOnly; 7313}(); 7314//#endregion 7315//#region node_modules/@juggle/resize-observer/lib/utils/element.js 7316var isSVG = function(target) { 7317 return target instanceof SVGElement && "getBBox" in target; 7318}; 7319var isHidden = function(target) { 7320 if (isSVG(target)) { 7321 var _a = target.getBBox(), width = _a.width, height = _a.height; 7322 return !width && !height; 7323 } 7324 var _b = target, offsetWidth = _b.offsetWidth, offsetHeight = _b.offsetHeight; 7325 return !(offsetWidth || offsetHeight || target.getClientRects().length); 7326}; 7327var isElement = function(obj) { 7328 var _a; 7329 if (obj instanceof Element) return true; 7330 var scope = (_a = obj === null || obj === void 0 ? void 0 : obj.ownerDocument) === null || _a === void 0 ? void 0 : _a.defaultView; 7331 return !!(scope && obj instanceof scope.Element); 7332}; 7333var isReplacedElement = function(target) { 7334 switch (target.tagName) { 7335 case "INPUT": if (target.type !== "image") break; 7336 case "VIDEO": 7337 case "AUDIO": 7338 case "EMBED": 7339 case "OBJECT": 7340 case "CANVAS": 7341 case "IFRAME": 7342 case "IMG": return true; 7343 } 7344 return false;
vendor: 9,401 bytes, lines 7345-7601
7345}; 7346//#endregion 7347//#region node_modules/@juggle/resize-observer/lib/utils/global.js 7348var global = typeof window !== "undefined" ? window : {}; 7349//#endregion 7350//#region node_modules/@juggle/resize-observer/lib/algorithms/calculateBoxSize.js 7351var cache = /* @__PURE__ */ new WeakMap(); 7352var scrollRegexp = /auto|scroll/; 7353var verticalRegexp = /^tb|vertical/; 7354var IE = /msie|trident/i.test(global.navigator && global.navigator.userAgent); 7355var parseDimension = function(pixel) { 7356 return parseFloat(pixel || "0"); 7357}; 7358var size = function(inlineSize, blockSize, switchSizes) { 7359 if (inlineSize === void 0) inlineSize = 0; 7360 if (blockSize === void 0) blockSize = 0; 7361 if (switchSizes === void 0) switchSizes = false; 7362 return new ResizeObserverSize((switchSizes ? blockSize : inlineSize) || 0, (switchSizes ? inlineSize : blockSize) || 0); 7363}; 7364var zeroBoxes = freeze({ 7365 devicePixelContentBoxSize: size(), 7366 borderBoxSize: size(), 7367 contentBoxSize: size(), 7368 contentRect: new DOMRectReadOnly(0, 0, 0, 0) 7369}); 7370var calculateBoxSizes = function(target, forceRecalculation) { 7371 if (forceRecalculation === void 0) forceRecalculation = false; 7372 if (cache.has(target) && !forceRecalculation) return cache.get(target); 7373 if (isHidden(target)) { 7374 cache.set(target, zeroBoxes); 7375 return zeroBoxes; 7376 } 7377 var cs = getComputedStyle(target); 7378 var svg = isSVG(target) && target.ownerSVGElement && target.getBBox(); 7379 var removePadding = !IE && cs.boxSizing === "border-box"; 7380 var switchSizes = verticalRegexp.test(cs.writingMode || ""); 7381 var canScrollVertically = !svg && scrollRegexp.test(cs.overflowY || ""); 7382 var canScrollHorizontally = !svg && scrollRegexp.test(cs.overflowX || ""); 7383 var paddingTop = svg ? 0 : parseDimension(cs.paddingTop); 7384 var paddingRight = svg ? 0 : parseDimension(cs.paddingRight); 7385 var paddingBottom = svg ? 0 : parseDimension(cs.paddingBottom); 7386 var paddingLeft = svg ? 0 : parseDimension(cs.paddingLeft); 7387 var borderTop = svg ? 0 : parseDimension(cs.borderTopWidth); 7388 var borderRight = svg ? 0 : parseDimension(cs.borderRightWidth); 7389 var borderBottom = svg ? 0 : parseDimension(cs.borderBottomWidth); 7390 var borderLeft = svg ? 0 : parseDimension(cs.borderLeftWidth); 7391 var horizontalPadding = paddingLeft + paddingRight; 7392 var verticalPadding = paddingTop + paddingBottom; 7393 var horizontalBorderArea = borderLeft + borderRight; 7394 var verticalBorderArea = borderTop + borderBottom; 7395 var horizontalScrollbarThickness = !canScrollHorizontally ? 0 : target.offsetHeight - verticalBorderArea - target.clientHeight; 7396 var verticalScrollbarThickness = !canScrollVertically ? 0 : target.offsetWidth - horizontalBorderArea - target.clientWidth; 7397 var widthReduction = removePadding ? horizontalPadding + horizontalBorderArea : 0; 7398 var heightReduction = removePadding ? verticalPadding + verticalBorderArea : 0; 7399 var contentWidth = svg ? svg.width : parseDimension(cs.width) - widthReduction - verticalScrollbarThickness; 7400 var contentHeight = svg ? svg.height : parseDimension(cs.height) - heightReduction - horizontalScrollbarThickness; 7401 var borderBoxWidth = contentWidth + horizontalPadding + verticalScrollbarThickness + horizontalBorderArea; 7402 var borderBoxHeight = contentHeight + verticalPadding + horizontalScrollbarThickness + verticalBorderArea; 7403 var boxes = freeze({ 7404 devicePixelContentBoxSize: size(Math.round(contentWidth * devicePixelRatio), Math.round(contentHeight * devicePixelRatio), switchSizes), 7405 borderBoxSize: size(borderBoxWidth, borderBoxHeight, switchSizes), 7406 contentBoxSize: size(contentWidth, contentHeight, switchSizes), 7407 contentRect: new DOMRectReadOnly(paddingLeft, paddingTop, contentWidth, contentHeight) 7408 }); 7409 cache.set(target, boxes); 7410 return boxes; 7411}; 7412var calculateBoxSize = function(target, observedBox, forceRecalculation) { 7413 var _a = calculateBoxSizes(target, forceRecalculation), borderBoxSize = _a.borderBoxSize, contentBoxSize = _a.contentBoxSize, devicePixelContentBoxSize = _a.devicePixelContentBoxSize; 7414 switch (observedBox) { 7415 case ResizeObserverBoxOptions.DEVICE_PIXEL_CONTENT_BOX: return devicePixelContentBoxSize; 7416 case ResizeObserverBoxOptions.BORDER_BOX: return borderBoxSize; 7417 default: return contentBoxSize; 7418 } 7419}; 7420//#endregion 7421//#region node_modules/@juggle/resize-observer/lib/ResizeObserverEntry.js 7422var ResizeObserverEntry = function() { 7423 function ResizeObserverEntry(target) { 7424 var boxes = calculateBoxSizes(target); 7425 this.target = target; 7426 this.contentRect = boxes.contentRect; 7427 this.borderBoxSize = freeze([boxes.borderBoxSize]); 7428 this.contentBoxSize = freeze([boxes.contentBoxSize]); 7429 this.devicePixelContentBoxSize = freeze([boxes.devicePixelContentBoxSize]); 7430 } 7431 return ResizeObserverEntry; 7432}(); 7433//#endregion 7434//#region node_modules/@juggle/resize-observer/lib/algorithms/calculateDepthForNode.js 7435var calculateDepthForNode = function(node) { 7436 if (isHidden(node)) return Infinity; 7437 var depth = 0; 7438 var parent = node.parentNode; 7439 while (parent) { 7440 depth += 1; 7441 parent = parent.parentNode; 7442 } 7443 return depth; 7444}; 7445//#endregion 7446//#region node_modules/@juggle/resize-observer/lib/algorithms/broadcastActiveObservations.js 7447var broadcastActiveObservations = function() { 7448 var shallowestDepth = Infinity; 7449 var callbacks = []; 7450 resizeObservers.forEach(function processObserver(ro) { 7451 if (ro.activeTargets.length === 0) return; 7452 var entries = []; 7453 ro.activeTargets.forEach(function processTarget(ot) { 7454 var entry = new ResizeObserverEntry(ot.target); 7455 var targetDepth = calculateDepthForNode(ot.target); 7456 entries.push(entry); 7457 ot.lastReportedSize = calculateBoxSize(ot.target, ot.observedBox); 7458 if (targetDepth < shallowestDepth) shallowestDepth = targetDepth; 7459 }); 7460 callbacks.push(function resizeObserverCallback() { 7461 ro.callback.call(ro.observer, entries, ro.observer); 7462 }); 7463 ro.activeTargets.splice(0, ro.activeTargets.length); 7464 }); 7465 for (var _i = 0, callbacks_1 = callbacks; _i < callbacks_1.length; _i++) { 7466 var callback = callbacks_1[_i]; 7467 callback(); 7468 } 7469 return shallowestDepth; 7470}; 7471//#endregion 7472//#region node_modules/@juggle/resize-observer/lib/algorithms/gatherActiveObservationsAtDepth.js 7473var gatherActiveObservationsAtDepth = function(depth) { 7474 resizeObservers.forEach(function processObserver(ro) { 7475 ro.activeTargets.splice(0, ro.activeTargets.length); 7476 ro.skippedTargets.splice(0, ro.skippedTargets.length); 7477 ro.observationTargets.forEach(function processTarget(ot) { 7478 if (ot.isActive()) if (calculateDepthForNode(ot.target) > depth) ro.activeTargets.push(ot); 7479 else ro.skippedTargets.push(ot); 7480 }); 7481 }); 7482}; 7483//#endregion 7484//#region node_modules/@juggle/resize-observer/lib/utils/process.js 7485var process = function() { 7486 var depth = 0; 7487 gatherActiveObservationsAtDepth(depth); 7488 while (hasActiveObservations()) { 7489 depth = broadcastActiveObservations(); 7490 gatherActiveObservationsAtDepth(depth); 7491 } 7492 if (hasSkippedObservations()) deliverResizeLoopError(); 7493 return depth > 0; 7494}; 7495//#endregion 7496//#region node_modules/@juggle/resize-observer/lib/utils/queueMicroTask.js 7497var trigger; 7498var callbacks = []; 7499var notify = function() { 7500 return callbacks.splice(0).forEach(function(cb) { 7501 return cb(); 7502 }); 7503}; 7504var queueMicroTask = function(callback) { 7505 if (!trigger) { 7506 var toggle_1 = 0; 7507 var el_1 = document.createTextNode(""); 7508 new MutationObserver(function() { 7509 return notify(); 7510 }).observe(el_1, { characterData: true }); 7511 trigger = function() { 7512 el_1.textContent = "".concat(toggle_1 ? toggle_1-- : toggle_1++); 7513 }; 7514 } 7515 callbacks.push(callback); 7516 trigger(); 7517}; 7518//#endregion 7519//#region node_modules/@juggle/resize-observer/lib/utils/queueResizeObserver.js 7520var queueResizeObserver = function(cb) { 7521 queueMicroTask(function ResizeObserver() { 7522 requestAnimationFrame(cb); 7523 }); 7524}; 7525//#endregion 7526//#region node_modules/@juggle/resize-observer/lib/utils/scheduler.js 7527var watching = 0; 7528var isWatching = function() { 7529 return !!watching; 7530}; 7531var CATCH_PERIOD = 250; 7532var observerConfig = { 7533 attributes: true, 7534 characterData: true, 7535 childList: true, 7536 subtree: true 7537}; 7538var events = [ 7539 "resize", 7540 "load", 7541 "transitionend", 7542 "animationend", 7543 "animationstart", 7544 "animationiteration", 7545 "keyup", 7546 "keydown", 7547 "mouseup", 7548 "mousedown", 7549 "mouseover", 7550 "mouseout", 7551 "blur", 7552 "focus" 7553]; 7554var time = function(timeout) { 7555 if (timeout === void 0) timeout = 0; 7556 return Date.now() + timeout; 7557}; 7558var scheduled = false; 7559var scheduler = new (function() { 7560 function Scheduler() { 7561 var _this = this; 7562 this.stopped = true; 7563 this.listener = function() { 7564 return _this.schedule(); 7565 }; 7566 } 7567 Scheduler.prototype.run = function(timeout) { 7568 var _this = this; 7569 if (timeout === void 0) timeout = CATCH_PERIOD; 7570 if (scheduled) return; 7571 scheduled = true; 7572 var until = time(timeout); 7573 queueResizeObserver(function() { 7574 var elementsHaveResized = false; 7575 try { 7576 elementsHaveResized = process(); 7577 } finally { 7578 scheduled = false; 7579 timeout = until - time(); 7580 if (!isWatching()) return; 7581 if (elementsHaveResized) _this.run(1e3); 7582 else if (timeout > 0) _this.run(timeout); 7583 else _this.start(); 7584 } 7585 }); 7586 }; 7587 Scheduler.prototype.schedule = function() { 7588 this.stop(); 7589 this.run(); 7590 }; 7591 Scheduler.prototype.observe = function() { 7592 var _this = this; 7593 var cb = function() { 7594 return _this.observer && _this.observer.observe(document.body, observerConfig); 7595 }; 7596 document.body ? cb() : global.addEventListener("DOMContentLoaded", cb); 7597 }; 7598 Scheduler.prototype.start = function() { 7599 var _this = this; 7600 if (this.stopped) { 7601 this.stopped = false;
7602 this.observer = new MutationObserver(this.listener); 7603 this.observe(); 7604 events.forEach(function(name) { 7605 return global.addEventListener(name, _this.listener, true); 7606 }); 7607 } 7608 }; 7609 Scheduler.prototype.stop = function() { 7610 var _this = this; 7611 if (!this.stopped) { 7612 this.observer && this.observer.disconnect(); 7613 events.forEach(function(name) { 7614 return global.removeEventListener(name, _this.listener, true); 7615 }); 7616 this.stopped = true; 7617 } 7618 }; 7619 return Scheduler; 7620}())(); 7621var updateCount = function(n) { 7622 !watching && n > 0 && scheduler.start(); 7623 watching += n; 7624 !watching && scheduler.stop(); 7625}; 7626//#endregion 7627//#region node_modules/@juggle/resize-observer/lib/ResizeObservation.js 7628var skipNotifyOnElement = function(target) { 7629 return !isSVG(target) && !isReplacedElement(target) && getComputedStyle(target).display === "inline"; 7630}; 7631var ResizeObservation = function() { 7632 function ResizeObservation(target, observedBox) { 7633 this.target = target; 7634 this.observedBox = observedBox || ResizeObserverBoxOptions.CONTENT_BOX; 7635 this.lastReportedSize = { 7636 inlineSize: 0, 7637 blockSize: 0 7638 }; 7639 } 7640 ResizeObservation.prototype.isActive = function() { 7641 var size = calculateBoxSize(this.target, this.observedBox, true); 7642 if (skipNotifyOnElement(this.target)) this.lastReportedSize = size; 7643 if (this.lastReportedSize.inlineSize !== size.inlineSize || this.lastReportedSize.blockSize !== size.blockSize) return true; 7644 return false; 7645 }; 7646 return ResizeObservation; 7647}(); 7648//#endregion 7649//#region node_modules/@juggle/resize-observer/lib/ResizeObserverDetail.js 7650var ResizeObserverDetail = function() { 7651 function ResizeObserverDetail(resizeObserver, callback) { 7652 this.activeTargets = []; 7653 this.skippedTargets = []; 7654 this.observationTargets = []; 7655 this.observer = resizeObserver; 7656 this.callback = callback; 7657 } 7658 return ResizeObserverDetail; 7659}(); 7660//#endregion 7661//#region node_modules/@juggle/resize-observer/lib/ResizeObserverController.js 7662var observerMap = /* @__PURE__ */ new WeakMap(); 7663var getObservationIndex = function(observationTargets, target) { 7664 for (var i = 0; i < observationTargets.length; i += 1) if (observationTargets[i].target === target) return i; 7665 return -1; 7666}; 7667var ResizeObserverController = function() { 7668 function ResizeObserverController() {} 7669 ResizeObserverController.connect = function(resizeObserver, callback) { 7670 var detail = new ResizeObserverDetail(resizeObserver, callback); 7671 observerMap.set(resizeObserver, detail); 7672 }; 7673 ResizeObserverController.observe = function(resizeObserver, target, options) { 7674 var detail = observerMap.get(resizeObserver); 7675 var firstObservation = detail.observationTargets.length === 0; 7676 if (getObservationIndex(detail.observationTargets, target) < 0) { 7677 firstObservation && resizeObservers.push(detail); 7678 detail.observationTargets.push(new ResizeObservation(target, options && options.box)); 7679 updateCount(1); 7680 scheduler.schedule(); 7681 } 7682 }; 7683 ResizeObserverController.unobserve = function(resizeObserver, target) { 7684 var detail = observerMap.get(resizeObserver); 7685 var index = getObservationIndex(detail.observationTargets, target); 7686 var lastObservation = detail.observationTargets.length === 1; 7687 if (index >= 0) { 7688 lastObservation && resizeObservers.splice(resizeObservers.indexOf(detail), 1); 7689 detail.observationTargets.splice(index, 1); 7690 updateCount(-1); 7691 } 7692 }; 7693 ResizeObserverController.disconnect = function(resizeObserver) { 7694 var _this = this; 7695 var detail = observerMap.get(resizeObserver); 7696 detail.observationTargets.slice().forEach(function(ot) { 7697 return _this.unobserve(resizeObserver, ot.target); 7698 }); 7699 detail.activeTargets.splice(0, detail.activeTargets.length); 7700 }; 7701 return ResizeObserverController; 7702}(); 7703//#endregion 7704//#region node_modules/@juggle/resize-observer/lib/ResizeObserver.js 7705var ResizeObserver$2 = function() { 7706 function ResizeObserver(callback) { 7707 if (arguments.length === 0) throw new TypeError("Failed to construct 'ResizeObserver': 1 argument required, but only 0 present."); 7708 if (typeof callback !== "function") throw new TypeError("Failed to construct 'ResizeObserver': The callback provided as parameter 1 is not a function."); 7709 ResizeObserverController.connect(this, callback); 7710 } 7711 ResizeObserver.prototype.observe = function(target, options) { 7712 if (arguments.length === 0) throw new TypeError("Failed to execute 'observe' on 'ResizeObserver': 1 argument required, but only 0 present."); 7713 if (!isElement(target)) throw new TypeError("Failed to execute 'observe' on 'ResizeObserver': parameter 1 is not of type 'Element"); 7714 ResizeObserverController.observe(this, target, options); 7715 }; 7716 ResizeObserver.prototype.unobserve = function(target) { 7717 if (arguments.length === 0) throw new TypeError("Failed to execute 'unobserve' on 'ResizeObserver': 1 argument required, but only 0 present."); 7718 if (!isElement(target)) throw new TypeError("Failed to execute 'unobserve' on 'ResizeObserver': parameter 1 is not of type 'Element"); 7719 ResizeObserverController.unobserve(this, target); 7720 }; 7721 ResizeObserver.prototype.disconnect = function() { 7722 ResizeObserverController.disconnect(this); 7723 }; 7724 ResizeObserver.toString = function() { 7725 return "function ResizeObserver () { [polyfill code] }"; 7726 }; 7727 return ResizeObserver; 7728}(); 7729//#endregion 7730//#region node_modules/raf-schd/dist/raf-schd.esm.js 7731var rafSchd = function rafSchd(fn) { 7732 var lastArgs = []; 7733 var frameId = null; 7734 var wrapperFn = function wrapperFn() { 7735 for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) args[_key] = arguments[_key]; 7736 lastArgs = args; 7737 if (frameId) return; 7738 frameId = requestAnimationFrame(function() { 7739 frameId = null; 7740 fn.apply(void 0, lastArgs); 7741 }); 7742 }; 7743 wrapperFn.cancel = function() { 7744 if (!frameId) return; 7745 cancelAnimationFrame(frameId); 7746 frameId = null; 7747 }; 7748 return wrapperFn; 7749}; 7750//#endregion 7751//#region node_modules/masonic/dist/module/use-resize-observer.js 7752var ResizeObserver$1 = typeof window !== "undefined" && "ResizeObserver" in window ? window.ResizeObserver : ResizeObserver$2; 7753/** 7754* Creates a resize observer that forces updates to the grid cell positions when mutations are 7755* made to cells affecting their height. 7756*
7757* @param positioner - The masonry cell positioner created by the `usePositioner()` hook. 7758*/ 7759function useResizeObserver(positioner) { 7760 const resizeObserver = createResizeObserver(positioner, useForceUpdate()); 7761 function _ref() { 7762 return resizeObserver.disconnect(); 7763 } 7764 import_react.useEffect(() => _ref, [resizeObserver]); 7765 return resizeObserver; 7766} 7767function _ref2(handler) { 7768 handler.cancel(); 7769} 7770/** 7771* Creates a resize observer that fires an `updater` callback whenever the height of 7772* one or many cells change. The `useResizeObserver()` hook is using this under the hood. 7773* 7774* @param positioner - A cell positioner created by the `usePositioner()` hook or the `createPositioner()` utility 7775* @param updater - A callback that fires whenever one or many cell heights change. 7776*/ 7777var createResizeObserver = /*#__PURE__*/ memoize( 7778 [WeakMap], 7779 /* istanbul ignore next */ 7780 (positioner, updater) => { 7781 const updates = []; 7782 const update = rafSchd(() => { 7783 if (updates.length > 0) { 7784 positioner.update(updates); 7785 updater(updates); 7786 } 7787 updates.length = 0; 7788 }); 7789 const commonHandler = (target) => { 7790 const height = target.offsetHeight; 7791 if (height > 0) { 7792 const index = elementsCache.get(target); 7793 if (index !== void 0) { 7794 const position = positioner.get(index); 7795 if (position !== void 0 && height !== position.height) updates.push(index, height); 7796 } 7797 } 7798 update(); 7799 }; 7800 const handlers = /* @__PURE__ */ new Map(); 7801 const handleEntries = (entries) => { 7802 let i = 0; 7803 for (; i < entries.length; i++) { 7804 const entry = entries[i]; 7805 const index = elementsCache.get(entry.target); 7806 if (index === void 0) continue; 7807 let handler = handlers.get(index); 7808 if (!handler) { 7809 handler = rafSchd(commonHandler); 7810 handlers.set(index, handler); 7811 } 7812 handler(entry.target); 7813 } 7814 }; 7815 const ro = new ResizeObserver$1(handleEntries); 7816 const disconnect = ro.disconnect.bind(ro); 7817 ro.disconnect = () => { 7818 disconnect(); 7819 handlers.forEach(_ref2); 7820 }; 7821 return ro; 7822 } 7823); 7824//#endregion 7825//#region node_modules/masonic/dist/module/use-scroll-to-index.js 7826/** 7827* A hook that creates a callback for scrolling to a specific index in 7828* the "items" array. 7829* 7830* @param positioner - A positioner created by the `usePositioner()` hook 7831* @param options - Configuration options 7832*/ 7833function useScrollToIndex(positioner, options) { 7834 var _latestOptions$curren; 7835 const { align = "top", element = typeof window !== "undefined" && window, offset = 0, height = typeof window !== "undefined" ? window.innerHeight : 0 } = options; 7836 const latestOptions = useLatest({ 7837 positioner, 7838 element, 7839 align, 7840 offset, 7841 height 7842 }); 7843 const getTarget = import_react.useRef(() => { 7844 const latestElement = latestOptions.current.element; 7845 return latestElement && "current" in latestElement ? latestElement.current : latestElement; 7846 }).current; 7847 const [state, dispatch] = import_react.useReducer((state, action) => { 7848 const nextState = { 7849 position: state.position, 7850 index: state.index, 7851 prevTop: state.prevTop 7852 }; 7853 /* istanbul ignore next */ 7854 if (action.type === "scrollToIndex") { 7855 var _action$value; 7856 return { 7857 position: latestOptions.current.positioner.get((_action$value = action.value) !== null && _action$value !== void 0 ? _action$value : -1), 7858 index: action.value, 7859 prevTop: void 0 7860 }; 7861 } else if (action.type === "setPosition") nextState.position = action.value; 7862 else if (action.type === "setPrevTop") nextState.prevTop = action.value; 7863 else if (action.type === "reset") return defaultState; 7864 return nextState; 7865 }, defaultState); 7866 const throttledDispatch = useThrottleCallback(dispatch, 15); 7867 useEvent(getTarget(), "scroll", () => { 7868 if (!state.position && state.index) { 7869 const position = latestOptions.current.positioner.get(state.index); 7870 if (position) dispatch({ 7871 type: "setPosition", 7872 value: position 7873 }); 7874 } 7875 }); 7876 const currentTop = state.index !== void 0 && ((_latestOptions$curren = latestOptions.current.positioner.get(state.index)) === null || _latestOptions$curren === void 0 ? void 0 : _latestOptions$curren.top); 7877 import_react.useEffect(() => { 7878 const target = getTarget(); 7879 if (!target) return; 7880 const { height, align, offset, positioner } = latestOptions.current; 7881 if (state.position) { 7882 let scrollTop = state.position.top; 7883 if (align === "bottom") scrollTop = scrollTop - height + state.position.height;
7884 else if (align === "center") scrollTop -= (height - state.position.height) / 2; 7885 target.scrollTo(0, Math.max(0, scrollTop += offset)); 7886 let didUnsubscribe = false; 7887 const timeout = setTimeout(() => !didUnsubscribe && dispatch({ type: "reset" }), 400); 7888 return () => { 7889 didUnsubscribe = true; 7890 clearTimeout(timeout); 7891 }; 7892 } else if (state.index !== void 0) { 7893 let estimatedTop = positioner.shortestColumn() / positioner.size() * state.index; 7894 if (state.prevTop) estimatedTop = Math.max(estimatedTop, state.prevTop + height); 7895 target.scrollTo(0, estimatedTop); 7896 throttledDispatch({ 7897 type: "setPrevTop", 7898 value: estimatedTop 7899 }); 7900 } 7901 }, [ 7902 currentTop, 7903 state, 7904 latestOptions, 7905 getTarget, 7906 throttledDispatch 7907 ]); 7908 return import_react.useRef((index) => { 7909 dispatch({ 7910 type: "scrollToIndex", 7911 value: index 7912 }); 7913 }).current; 7914} 7915var defaultState = { 7916 index: void 0, 7917 position: void 0, 7918 prevTop: void 0 7919}; 7920//#endregion 7921//#region node_modules/masonic/dist/module/use-infinite-loader.js 7922/** 7923* A utility hook for seamlessly adding infinite scroll behavior to the `useMasonry()` hook. This 7924* hook invokes a callback each time the last rendered index surpasses the total number of items 7925* in your items array or the number defined in the `totalItems` option. 7926* 7927* @param loadMoreItems - This callback is invoked when more rows must be loaded. It will be used to 7928* determine when to refresh the list with the newly-loaded data. This callback may be called multiple 7929* times in reaction to a single scroll event, so it's important to memoize its arguments. If you're 7930* creating this callback inside of a functional component, make sure you wrap it in `React.useCallback()`, 7931* as well. 7932* @param options 7933*/ 7934function useInfiniteLoader(loadMoreItems, options) { 7935 if (options === void 0) options = emptyObj; 7936 const { isItemLoaded, minimumBatchSize = 16, threshold = 16, totalItems = 9e9 } = options; 7937 const storedLoadMoreItems = useLatest(loadMoreItems); 7938 const storedIsItemLoaded = useLatest(isItemLoaded); 7939 return import_react.useCallback((startIndex, stopIndex, items) => { 7940 const unloadedRanges = scanForUnloadedRanges(storedIsItemLoaded.current, minimumBatchSize, items, totalItems, Math.max(0, startIndex - threshold), Math.min(totalItems - 1, (stopIndex || 0) + threshold)); 7941 for (let i = 0; i < unloadedRanges.length - 1; ++i) storedLoadMoreItems.current(unloadedRanges[i], unloadedRanges[++i], items); 7942 }, [ 7943 totalItems, 7944 minimumBatchSize, 7945 threshold, 7946 storedLoadMoreItems, 7947 storedIsItemLoaded 7948 ]); 7949} 7950/** 7951* Returns all of the ranges within a larger range that contain unloaded rows. 7952* 7953* @param isItemLoaded 7954* @param minimumBatchSize 7955* @param items 7956* @param totalItems 7957* @param startIndex 7958* @param stopIndex 7959*/ 7960function scanForUnloadedRanges(isItemLoaded, minimumBatchSize, items, totalItems, startIndex, stopIndex) { 7961 if (isItemLoaded === void 0) isItemLoaded = defaultIsItemLoaded; 7962 if (minimumBatchSize === void 0) minimumBatchSize = 16; 7963 if (totalItems === void 0) totalItems = 9e9; 7964 const unloadedRanges = []; 7965 let rangeStartIndex, rangeStopIndex, index = startIndex; 7966 /* istanbul ignore next */ 7967 for (; index <= stopIndex; index++) if (!isItemLoaded(index, items)) { 7968 rangeStopIndex = index; 7969 if (rangeStartIndex === void 0) rangeStartIndex = index; 7970 } else if (rangeStartIndex !== void 0 && rangeStopIndex !== void 0) { 7971 unloadedRanges.push(rangeStartIndex, rangeStopIndex); 7972 rangeStartIndex = rangeStopIndex = void 0; 7973 } 7974 if (rangeStartIndex !== void 0 && rangeStopIndex !== void 0) { 7975 const potentialStopIndex = Math.min(Math.max(rangeStopIndex, rangeStartIndex + minimumBatchSize - 1), totalItems - 1); 7976 /* istanbul ignore next */ 7977 for (index = rangeStopIndex + 1; index <= potentialStopIndex; index++) if (!isItemLoaded(index, items)) rangeStopIndex = index; 7978 else break; 7979 unloadedRanges.push(rangeStartIndex, rangeStopIndex); 7980 } 7981 /* istanbul ignore next */ 7982 if (unloadedRanges.length) { 7983 let firstUnloadedStart = unloadedRanges[0]; 7984 const firstUnloadedStop = unloadedRanges[1]; 7985 while (firstUnloadedStop - firstUnloadedStart + 1 < minimumBatchSize && firstUnloadedStart > 0) { 7986 const index = firstUnloadedStart - 1; 7987 if (!isItemLoaded(index, items)) unloadedRanges[0] = firstUnloadedStart = index; 7988 else break; 7989 } 7990 } 7991 return unloadedRanges; 7992} 7993var defaultIsItemLoaded = (index, items) => items[index] !== void 0; 7994var emptyObj = {}; 7995//#endregion 7996//#region node_modules/mini-virtual-list/dist/module/use-scroller.js 7997function useScroller(ref, options = {}) { 7998 const { offset = 0, fps = 12 } = options; 7999 const current = ref && "current" in ref ? ref.current : ref; 8000 const getScrollPos = () => !current ? 0 : "scrollTop" in current ? current.scrollTop : current.pageYOffset || current.scrollY; 8001 const [scrollTop, setScrollTop] = useThrottle(getScrollPos, fps); 8002 const [isScrolling, setIsScrolling] = import_react.useState(false); 8003 function _ref() { 8004 setIsScrolling(false); 8005 } 8006 usePassiveLayoutEffect(() => { 8007 if (current) { 8008 let didUnmount = false;
8009 let to; 8010 const clearTo = () => to && clearRequestTimeout(to); 8011 const handleScroll = () => { 8012 if (didUnmount) return; 8013 setScrollTop(getScrollPos()); 8014 setIsScrolling(true); 8015 clearTo(); 8016 to = requestTimeout(_ref, 1e3 / fps); 8017 }; 8018 current.addEventListener("scroll", handleScroll); 8019 return () => { 8020 current.removeEventListener("scroll", handleScroll); 8021 clearTo(); 8022 didUnmount = true; 8023 }; 8024 } 8025 }, [current, fps]); 8026 return { 8027 scrollTop: Math.max(0, scrollTop - offset), 8028 isScrolling 8029 }; 8030} 8031//#endregion 8032//#region client/components/editor/Components/TruffleEditingWorkSpace/Components/Libraries/Components/TruffleMediaLibrary/AssetGrid/useSize.ts 8033/** 8034* A different implementation of useSize from `mini-virtual-list` that uses ResizeObserver instead of resize event 8035* @param ref Element to observe 8036*/ 8037function useSize(ref) { 8038 const getSize = () => { 8039 const { current } = ref; 8040 if (current) { 8041 const computedStyle = getComputedStyle(current); 8042 return { 8043 width: current.clientWidth - parseFloat(computedStyle.paddingLeft) - parseFloat(computedStyle.paddingRight), 8044 height: current.clientHeight - parseFloat(computedStyle.paddingTop) - parseFloat(computedStyle.paddingBottom) 8045 }; 8046 } 8047 return { 8048 width: 0, 8049 height: 0 8050 }; 8051 }; 8052 const [size, setSize] = (0, import_react.useState)(getSize); 8053 (0, import_react.useEffect)(() => { 8054 const observer = new ResizeObserver((entries) => { 8055 for (const entry of entries) if (entry.target === ref.current) { 8056 setSize({ 8057 width: entry.contentRect.width, 8058 height: entry.contentRect.height 8059 }); 8060 break; 8061 } 8062 }); 8063 observer.observe(ref.current); 8064 return () => { 8065 observer.disconnect(); 8066 }; 8067 }, [ref]); 8068 usePassiveLayoutEffect(() => { 8069 setSize(getSize()); 8070 }, []); 8071 return size; 8072} 8073//#endregion 8074//#region client/components/editor/Components/TruffleEditingWorkSpace/Components/Libraries/Components/TruffleMediaLibrary/AssetGrid/AssetGrid.tsx 8075var AssetGrid = (props) => { 8076 const { isDragActive } = (0, import_react.useContext)(YourMediaDropzoneContext); 8077 const containerRef = (0, import_react.useRef)(null); 8078 const { width, height } = useSize(containerRef); 8079 const { scrollTop, isScrolling } = useScroller(containerRef); 8080 const positioner = usePositioner({ 8081 width, 8082 columnWidth: props.itemWidth, 8083 columnGutter: props.rowGap, 8084 rowGutter: props.rowGap, 8085 columnCount: props.columnCount 8086 }, [ 8087 width, 8088 props.items, 8089 props.itemWidth, 8090 props.rowGap 8091 ]); 8092 const resizeObserver = useResizeObserver(positioner); 8093 const scrollToIndex = useScrollToIndex(positioner, { 8094 height, 8095 align: "top", 8096 element: containerRef 8097 }); 8098 const maybeLoadMore = useInfiniteLoader((startIndex, stopIndex, items) => { 8099 props.loadMoreItems?.(startIndex, stopIndex, items); 8100 }, { 8101 threshold: 10, 8102 totalItems: props.totalItemCount 8103 }); 8104 (0, import_react.useEffect)(() => { 8105 if (!assetGridEventTarget) return; 8106 function handleScrollToTop() { 8107 if (scrollTop !== 0) scrollToIndex(0); 8108 } 8109 function handleScrollToAsset(event) { 8110 const assetIndex = props.items.findIndex((item) => item.id === event.detail.id); 8111 if (assetIndex !== -1) scrollToIndex(assetIndex); 8112 } 8113 assetGridEventTarget.addEventListener("scrollToTop", handleScrollToTop); 8114 assetGridEventTarget.addEventListener("scrollToAsset", handleScrollToAsset); 8115 return () => { 8116 assetGridEventTarget.removeEventListener("scrollToTop", handleScrollToTop); 8117 assetGridEventTarget.removeEventListener("scrollToAsset", handleScrollToAsset); 8118 }; 8119 }, [ 8120 assetGridEventTarget, 8121 props.items, 8122 scrollToIndex 8123 ]); 8124 return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(GridContainer, { 8125 ref: containerRef, 8126 onDragOver: handleDragOverGrid, 8127 children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Box, { 8128 className: "media-grid-content", 8129 sx: { 8130 minHeight: "100%", 8131 height: "fit-content" 8132 }, 8133 children: useMasonry({ 8134 resizeObserver, 8135 positioner, 8136 scrollTop, 8137 isScrolling, 8138 height, 8139 itemHeightEstimate: props.itemHeight, 8140 items: props.items, 8141 itemKey: (item, index) => `${item.id}-${index}`, 8142 render: props.RenderItem, 8143 onRender: maybeLoadMore, 8144 role: props.activeLibraryView 8145 }) 8146 }
8146), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Slide, { 8147 direction: "up", 8148 in: isDragActive, 8149 children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ScrollIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FontAwesomeIcon, { icon: import_faAngleDown.faAngleDown }) }) 8150 })] 8151 }); 8152}; 8153var SCROLL_THRESHOLD = 64; 8154var SCROLL_SPEED = 5; 8155function handleDragOverGrid(e) { 8156 const target = e.currentTarget; 8157 if (!target) return; 8158 const targetRect = target.getBoundingClientRect(); 8159 if (e.clientY < targetRect.top + SCROLL_THRESHOLD) target.scrollTop -= SCROLL_SPEED; 8160 if (e.clientY > targetRect.bottom - SCROLL_THRESHOLD) target.scrollTop += SCROLL_SPEED; 8161} 8162var GridContainer = (0, import_material.styled)(import_material.Box)({ 8163 ...import_dist$3.scrollOnHoverSxProps, 8164 overflowY: "auto", 8165 height: "100%", 8166 minHeight: 0, 8167 padding: "1px", 8168 position: "relative" 8169}); 8170var ScrollIndicator = (0, import_material.styled)(import_material.Box)(({ theme }) => ({ 8171 position: "sticky", 8172 bottom: "21px", 8173 left: "50%", 8174 height: "32px", 8175 width: "32px", 8176 display: "flex", 8177 justifyContent: "center", 8178 alignItems: "center", 8179 pointerEvents: "none", 8180 border: `1px solid ${theme.palette.divider}`, 8181 borderRadius: "50%", 8182 backgroundColor: theme.palette.common.white, 8183 color: theme.palette.primary.main 8184})); 8185//#endregion 8186//#region client/components/editor/Components/TruffleEditingWorkSpace/Components/Libraries/Components/TruffleMediaLibrary/AssetGrid/YourLibraryAssetGrid.tsx 8187var LIST_ITEM_WIDTH = "100%"; 8188var LIST_ITEM_HEIGHT = 84; 8189var LIST_ROW_GAP = 0; 8190var PARTIAL_ITEMS_SUMMARY_PREFIX = "Showing: "; 8191var YourLibraryAssetGrid = (props) => { 8192 const { searchValue, filterMediaType, filterMediaSource, filterMinVideoDuration, filterMaxVideoDuration } = (0, import_react.useContext)(TruffleMediaLibraryContext); 8193 const { assetCount, folderCount } = props.gridItems.reduce((acc, item) => { 8194 return { 8195 assetCount: acc.assetCount + (item.type === ItemType.YOUR_LIBRARY ? 1 : 0), 8196 folderCount: acc.folderCount + (item.type === ItemType.FOLDER ? 1 : 0) 8197 }; 8198 }, { 8199 assetCount: 0, 8200 folderCount: 0 8201 }); 8202 let summary = `${assetCount} asset${assetCount !== 1 ? "s" : ""} & ${folderCount} folder${folderCount !== 1 ? "s" : ""}`; 8203 if (searchValue || filterMediaType !== MediaLibraryFilterMediaType.ALL || filterMediaSource !== MediaLibraryFilterMediaSource.ALL || filterMinVideoDuration !== 0 || filterMaxVideoDuration !== 600) summary = `${PARTIAL_ITEMS_SUMMARY_PREFIX} ${assetCount} out of ${props.totalMediaAssetsInLevel} assets & ${folderCount} out of ${props.totalFoldersInLevel} folders`; 8204 const columnCount = props.activeLibraryView === GqlClientLibraryViewType.GRID ? props.columns ? props.columns : 2 : 1; 8205 const items = (0, import_react.useMemo)(() => [...props.gridItems.map((item) => { 8206 switch (item.type) { 8207 case ItemType.YOUR_LIBRARY: return { 8208 ...item, 8209 enableDragDrop: props.enableDragDrop, 8210 onPreviewItem: props.onPreviewItem, 8211 onItemClick: props.enableDragDrop === false ? props.onItemClick : void 0, 8212 setAssetThreeDotsMenuAnchor: props.setAssetThreeDotsMenuAnchor, 8213 setAssetThreeDotsMenuAssetId: props.setAssetThreeDotsMenuAssetId, 8214 activeLibraryView: props.activeLibraryView, 8215 onItemClickAway: props.onItemClickAway, 8216 onConvertImageToVideo: props.onConvertImageToVideoFromLibrary, 8217 convertToVideoDisabledTooltip: props.convertToVideoDisabledTooltip 8218 }; 8219 case ItemType.FOLDER: return { 8220 ...item, 8221 enableDragDrop: props.enableDragDrop, 8222 onNavigateItem: props.onNavigateItem, 8223 onItemClick: props.enableDragDrop === false ? props.onItemClick : void 0, 8224 setFolderThreeDotsMenuFolderId: props.setFolderThreeDotsMenuFolderId, 8225 setFolderThreeDotsMenuAnchor: props.setFolderThreeDotsMenuAnchor, 8226 activeLibraryView: props.activeLibraryView, 8227 showFolderActionsSuccess: props.showFolderActionsSuccess, 8228 onMoveComplete: props.onMoveComplete, 8229 onItemClickAway: props.onItemClickAway 8230 }; 8231 case ItemType.UPLOAD_TILE: return { 8232 ...item, 8233 onUpload: props.onUpload, 8234 activeLibraryView: props.activeLibraryView 8235 }; 8236 } 8237 }), { 8238 id: "summary", 8239 type: "SUMMARY", 8240 summary, 8241 onClearFiltersAndSearch: props.onClearFiltersAndSearch, 8242 columnCount, 8243 itemCount: props.gridItems.length + 1, 8244 activeLibraryView: props.activeLibraryView 8245 }], [ 8246 props.gridItems, 8247 props.enableDragDrop, 8248 columnCount, 8249 summary, 8250 props.onPreviewItem, 8251 props.onNavigateItem, 8252 props.enableDragDrop === false ? props.onItemClick : void 0, 8253 props.onUpload, 8254 props.setAssetThreeDotsMenuAnchor, 8255 props.setAssetThreeDotsMenuAssetId, 8256 props.setFolderThreeDotsMenuAnchor, 8257 props.setFolderThreeDotsMenuFolderId, 8258 props.onConvertImageToVideoFromLibrary, 8259 props.convertToVideoDisabledTooltip 8260 ]); 8261 return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AssetGrid, { 8262 items, 8263 totalItemCount: items.length, 8264 RenderItem: GridItemRenderer$2, 8265 columnCount, 8266 rowGap: props.activeLibraryView === GqlClientLibraryViewType.GRID ? 16 : LIST_ROW_GAP, 8267 itemWidth: props.activeLibraryView === GqlClientLibraryViewType.GRID ? 158 : LIST_ITEM_WIDTH, 8268 itemHeight: props.activeLibraryView === GqlClientLibraryViewType.GRID ? 115 : LIST_ITEM_HEIGHT, 8269 activeLibraryView: props.activeLibraryView 8270 }, props.activeLibraryView); 8271}; 8272var GridItemRenderer$2 = ({ index, data }) => { 8273 const [grabbed, setGrabbed] = (0, import_react.useState)(false); 8274 const { selectedItemData, multiSelectItems } = (0, import_react.useContext)(TruffleMediaLibraryContext); 8275 const multiSelectEnabled = multiSelectItems !== null; 8276 const multiSelected = multiSelectItems?.has(data.id) ?? false; 8277 const itemWidth = data.activeLibraryView === GqlClientLibraryViewType.GRID ? 158 : LIST_ITEM_WIDTH; 8278 const itemHeight = data.activeLibraryView === GqlClientLibraryViewType.GRID ? 115 : LIST_ITEM_HEIGHT; 8279 const rowGap = data.activeLibraryView === GqlClientLibraryViewType.GRID ? 16 : LIST_ROW_GAP; 8280 if (!useRerender()) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { height: `${itemHeight}px` } }); 8281 if (data.type === ItemType.YOUR_LIBRARY || data.type === ItemType.FOLDER) { 8282 const selected = selectedItemData?.id === data.id; 8283 return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.ClickAwayListener, { 8284 onClickAway: selected ? () => data.onItemClickAway(data) : () => {}, 8285 children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(DraggableGridItem, { 8286 itemWidth, 8287 itemHeight, 8288 draggable: data.enableDragDrop, 8289 "aria-grabbed": grabbed, 8290 onDragStart: (e) => { 8291 if (data.enableDragDrop) { 8292 handleDragStart(e, data); 8293 setGrabbed(true); 8294 } 8295 }, 8296 onDragEnd: () => { 8297 if (data.enableDragDrop) { 8298 handleDragEnd(); 8299 setGrabbed(false); 8300 } 8301 },
8302 children: [data.type === ItemType.YOUR_LIBRARY && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AssetCard, { 8303 asset: data, 8304 loading: false, 8305 onPreview: () => { 8306 data.onPreviewItem(index); 8307 }, 8308 selected, 8309 multiSelectEnabled, 8310 multiSelected, 8311 onClick: data.enableDragDrop === false ? (() => data.onItemClick(data)) : void 0, 8312 enableDragDrop: data.enableDragDrop, 8313 setThreeDotsMenuAssetId: data.setAssetThreeDotsMenuAssetId, 8314 setThreeDotsMenuAnchor: data.setAssetThreeDotsMenuAnchor, 8315 activeLibraryView: data.activeLibraryView, 8316 onConvertImageToVideoClick: data.onConvertImageToVideo, 8317 convertToVideoDisabledTooltip: data.convertToVideoDisabledTooltip 8318 }), data.type === ItemType.FOLDER && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(YourLibraryFolderCard, { 8319 folder: data, 8320 onNavigate: () => { 8321 if (!multiSelectEnabled) data.onNavigateItem(data.id); 8322 }, 8323 selected, 8324 multiSelectEnabled, 8325 multiSelected, 8326 onClick: data.enableDragDrop === false ? (() => data.onItemClick(data)) : void 0, 8327 setThreeDotsMenuFolderId: data.setFolderThreeDotsMenuFolderId, 8328 setThreeDotsMenuAnchor: data.setFolderThreeDotsMenuAnchor, 8329 activeLibraryView: data.activeLibraryView, 8330 dropzoneDisabled: multiSelectEnabled || grabbed, 8331 showFolderActionsSuccess: data.showFolderActionsSuccess, 8332 onMoveComplete: data.onMoveComplete 8333 })] 8334 }) 8335 }); 8336 } 8337 if (data.type === ItemType.UPLOAD_TILE) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Box, { 8338 sx: { 8339 width: `${itemWidth}px`, 8340 height: itemHeight 8341 }, 8342 children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(UploadCard, { 8343 onUpload: data.onUpload, 8344 activeLibraryView: data.activeLibraryView, 8345 sxProps: [CommonUploadCardSxProps, data.activeLibraryView === GqlClientLibraryViewType.GRID ? GridUploadCardSxProps : ListUploadCardSxProps] 8346 }) 8347 }); 8348 if (data.type === "SUMMARY") { 8349 let style = {}; 8350 if (data.activeLibraryView === GqlClientLibraryViewType.GRID) style = getCenteredGridItemStyle(data.itemCount, data.columnCount); 8351 return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_material.Box, { 8352 sx: TextItemWrapperSxProps, 8353 style, 8354 children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Typography, { 8355 variant: "body1", 8356 textAlign: "center", 8357 color: "text.secondary", 8358 style: { 8359 width: typeof itemWidth === "string" ? itemWidth : itemWidth * data.columnCount + rowGap * (data.columnCount - 1), 8360 ...data.activeLibraryView === GqlClientLibraryViewType.LIST && { marginTop: "16px" } 8361 }, 8362 children: data.summary 8363 }), data.summary?.includes(PARTIAL_ITEMS_SUMMARY_PREFIX) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Typography, { 8364 variant: "body1", 8365 color: "primary.dark", 8366 textAlign: "center", 8367 "data-tracking-id": "tracking-id-media-lib-your-media-content-summary-clear-filters", 8368 sx: { cursor: "pointer" }, 8369 onClick: data.onClearFiltersAndSearch, 8370 children: "Clear filters" 8371 })] 8372 }); 8373 } 8374}; 8375var CommonUploadCardSxProps = { 8376 width: "100%", 8377 display: "flex", 8378 alignItems: "center", 8379 border: (theme) => `1px dashed ${theme.palette.grey[300]}` 8380}; 8381var GridUploadCardSxProps = { 8382 height: "100%", 8383 flexDirection: "column", 8384 justifyContent: "center" 8385}; 8386var ListUploadCardSxProps = { 8387 height: `${LIST_ITEM_HEIGHT}px`, 8388 gap: "6px", 8389 flexDirection: "row", 8390 justifyContent: "center", 8391 alignItems: "center", 8392 padding: "8px 16px" 8393}; 8394function useRerender(maxRenderCount = 1) { 8395 const [renderCount, setRenderCount] = (0, import_react.useState)(0); 8396 (0, import_react.useEffect)(() => { 8397 if (renderCount < maxRenderCount) setRenderCount((count) => count + 1); 8398 }, [renderCount, maxRenderCount]); 8399 return renderCount >= maxRenderCount; 8400} 8401//#endregion 8402//#region client/components/editor/Components/TruffleEditingWorkSpace/Components/Libraries/Components/TruffleMediaLibrary/AssetPreviewDialog/ImagePreview.tsx 8403var sxContainer$2 = { 8404 width: "100%", 8405 height: "100%", 8406 position: "relative", 8407 "& > img": { 8408 display: "block", 8409 height: "100%", 8410 width: "100%", 8411 objectFit: "scale-down" 8412 } 8413}; 8414var sxProgess$1 = { 8415 position: "absolute", 8416 width: "fit-content", 8417 height: "fit-content", 8418 top: 0, 8419 bottom: 0, 8420 left: 0, 8421 right: 0, 8422 margin: "auto" 8423}; 8424var ImagePreview = (props) => { 8425 const [loadedUrl, setLoadedUrl] = (0, import_react.useState)(""); 8426 const loading = props.url !== loadedUrl; 8427 return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_material.Box, { 8428 sx: sxContainer$2, 8429 children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("img", { 8430 src: props.url, 8431 alt: props.description, 8432 onLoad: () => setLoadedUrl(props.url), 8433 onError: () => setLoadedUrl(props.url), 8434 onContextMenu: disableRightClick, 8435 style: { visibility: loading ? "hidden" : "visible" } 8436 }
8436), loading ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TruffleCircularProgress, { 8437 sx: sxProgess$1, 8438 size: "80px" 8439 }) : null] 8440 }); 8441}; 8442//#endregion 8443//#region client/components/editor/Components/TruffleEditingWorkSpace/Components/Libraries/Components/TruffleMediaLibrary/AssetPreviewDialog/VideoPreview.tsx 8444var sxContainer$1 = { 8445 width: "100%", 8446 height: "100%", 8447 position: "relative", 8448 "& > video": { 8449 display: "block", 8450 height: "100%", 8451 width: "100%", 8452 objectFit: "scale-down" 8453 } 8454}; 8455var sxProgess = { 8456 position: "absolute", 8457 width: "fit-content", 8458 height: "fit-content", 8459 top: 0, 8460 bottom: 0, 8461 left: 0, 8462 right: 0, 8463 margin: "auto" 8464}; 8465var VideoPreview = (props) => { 8466 const [loadedUrl, setLoadedUrl] = (0, import_react.useState)(""); 8467 const loading = props.videoUrl !== loadedUrl; 8468 return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_material.Box, { 8469 sx: sxContainer$1, 8470 children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("video", { 8471 controls: true, 8472 controlsList: "nodownload", 8473 disablePictureInPicture: true, 8474 preload: "metadata", 8475 src: props.videoUrl, 8476 poster: props.posterUrl, 8477 onLoadedData: () => setLoadedUrl(props.videoUrl), 8478 onError: () => setLoadedUrl(props.videoUrl), 8479 onContextMenu: disableRightClick, 8480 style: { visibility: loading ? "hidden" : "visible" }, 8481 onPlay: props.onPlay 8482 }
8482), loading ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TruffleCircularProgress, { 8483 sx: sxProgess, 8484 size: "80px" 8485 }) : null] 8486 }); 8487}; 8488//#endregion 8489//#region client/components/editor/Components/TruffleEditingWorkSpace/Components/Libraries/Components/TruffleMediaLibrary/AssetPreviewDialog/AssetPreviewDialog.tsx 8490var sxContainer = { 8491 display: "flex", 8492 flexDirection: "column", 8493 height: "100%", 8494 alignItems: "stretch" 8495}; 8496var sxDescription = { 8497 flex: "0 0 50px", 8498 overflow: "auto" 8499}; 8500var sxPreviewWithArrows = { 8501 display: "flex", 8502 alignItems: "center", 8503 flex: "1 1 0px", 8504 height: "0px" 8505}; 8506var NavigationButton = (0, import_material.styled)("button")(({ theme }) => ({ 8507 flex: "0 0 auto", 8508 width: "32px", 8509 height: "32px", 8510 borderRadius: "50%", 8511 display: "flex", 8512 justifyContent: "center", 8513 alignItems: "center", 8514 fontSize: "13px", 8515 fontWeight: "900", 8516 color: theme.palette.text.disabled, 8517 borderStyle: "none", 8518 borderWidth: "0", 8519 borderColor: theme.palette.divider, 8520 backgroundColor: theme.palette.grey["300"], 8521 "&:enabled": { 8522 cursor: "pointer", 8523 color: theme.palette.primary.main, 8524 borderStyle: "solid", 8525 borderWidth: "1px", 8526 borderColor: theme.palette.divider, 8527 backgroundColor: theme.palette.common.white, 8528 "&:hover": { boxShadow: theme.shadows[4] } 8529 } 8530})); 8531var sxMedia = { 8532 flex: "1 1 0px", 8533 alignSelf: "stretch", 8534 margin: "0 32px" 8535}; 8536var AssetPreviewDialog = (props) => { 8537 function onPrev(trigger) { 8538 PendoService.getInstance().trackEvent("Media Lib Asset Preview Prev", { trigger }); 8539 props.onPrev(); 8540 } 8541 function onNext(trigger) { 8542 PendoService.getInstance().trackEvent("Media Lib Asset Preview Next", { trigger }); 8543 props.onNext(); 8544 } 8545 function handleKeyDown(event) { 8546 const handlers = { 8547 ArrowLeft: props.hasPrev && onPrev, 8548 ArrowRight: props.hasNext && onNext 8549 }; 8550 if (handlers[event.code]) { 8551 handlers[event.code]("keyboard"); 8552 event.stopPropagation(); 8553 event.preventDefault(); 8554 } 8555 } 8556 return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dist$3.DraggableConfirmationDialog, { 8557 title: props.name, 8558 open: props.open, 8559 onClose: props.onClose, 8560 maxWidth: props.maxWidth || false, 8561 inEditorStyling: true, 8562 isDraggable: false, 8563 isShakeable: false, 8564 closeIconButton: { show: true }, 8565 PaperProps: { sx: props.PaperProps }, 8566 primaryButton: props.primaryButton || { show: false }, 8567 secondaryButton: { show: false }, 8568 onKeyDown: handleKeyDown, 8569 children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_material.Box, { 8570 sx: sxContainer, 8571 children: [ 8572 props.banner,
8573 /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_material.Typography, { 8574 variant: "body1", 8575 sx: sxDescription, 8576 children: [ 8577 " ", 8578 props.description, 8579 " " 8580 ] 8581 }), 8582 /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_material.Box, { 8583 sx: sxPreviewWithArrows, 8584 children: [ 8585 /* @__PURE__ */ (0, import_jsx_runtime.jsx)(NavigationButton, { 8586 disabled: !props.hasPrev, 8587 onClick: () => props.hasPrev && onPrev("button"), 8588 "data-tracking-id": props.prevButtonTrackingId || "tracking-id-media-lib-asset-preview-prev-btn", 8589 children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FontAwesomeIcon, { icon: import_faAngleLeft.faAngleLeft }) 8590 }), 8591 /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Box, { 8592 sx: (0, import_dist$3.combineSxProps)(sxMedia, props.mediaSxProps), 8593 children: props.isVideo ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(VideoPreview, { 8594 videoUrl: props.url, 8595 posterUrl: props.posterUrl, 8596 onPlay: props.onVideoPlay 8597 }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ImagePreview, { 8598 url: props.url, 8599 description: props.description 8600 }) 8601 }), 8602 /* @__PURE__ */ (0, import_jsx_runtime.jsx)(NavigationButton, { 8603 disabled: !props.hasNext, 8604 onClick: () => props.hasNext && onNext("button"), 8605 "data-tracking-id": props.nextButtonTrackingId || "tracking-id-media-lib-asset-preview-next-btn", 8606 children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FontAwesomeIcon, { icon: import_faAngleRight.faAngleRight }) 8607 }) 8608 ] 8609 }) 8610 ] 8611 }) 8612 }); 8613}; 8614//#endregion 8615//#region client/components/editor/Components/TruffleEditingWorkSpace/Components/Libraries/Components/NoSearchResults.tsx 8616var noSearchResultsImage = new URL("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20viewBox='0%200%20200%20238.96'%3e%3cdefs%3e%3cstyle%3e.cls-1,.cls-14{fill:none;}.cls-18,.cls-2{fill:%230053e5;}.cls-14,.cls-2,.cls-3,.cls-4,.cls-7{stroke:%2303194f;stroke-miterlimit:10;}.cls-2,.cls-3{stroke-width:0.47px;}.cls-16,.cls-3,.cls-5{fill:%2303194f;}.cls-15,.cls-4,.cls-8{fill:%23f8f6f1;}.cls-14,.cls-4,.cls-7{stroke-width:0.51px;}.cls-6{fill:url(%23linear-gradient);}.cls-11,.cls-7{fill:%23e689f1;}.cls-9{fill:url(%23linear-gradient-2);}.cls-10{fill:url(%23linear-gradient-3);}.cls-12{clip-path:url(%23clip-path);}.cls-13{fill:url(%23linear-gradient-4);}.cls-15,.cls-16,.cls-18{fill-rule:evenodd;}.cls-17{fill:url(%23linear-gradient-5);}.cls-19{fill:%23fc545d;}%3c/style%3e%3clinearGradient%20id='linear-gradient'%20x1='79.93'%20y1='177.08'%20x2='111.06'%20y2='177.08'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20offset='0'%20stop-color='%23e689f1'/%3e%3cstop%20offset='0.19'%20stop-color='%23d17def'/%3e%3cstop%20offset='0.35'%20stop-color='%23ba72ed'/%3e%3cstop%20offset='0.5'%20stop-color='%239f69eb'/%3e%3cstop%20offset='0.66'%20stop-color='%238160e9'/%3e%3cstop%20offset='0.81'%20stop-color='%235a59e7'/%3e%3cstop%20offset='1'%20stop-color='%230053e5'/%3e%3c/linearGradient%3e%3clinearGradient%20id='linear-gradient-2'%20x1='82.19'%20y1='136.09'%20x2='86.37'%20y2='140.27'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20offset='0'%20stop-color='%2303194f'/%3e%3cstop%20offset='0.18'%20stop-color='%23032266'/%3e%3cstop%20offset='0.35'%20stop-color='%23022b7e'/%3e%3cstop%20offset='0.5'%20stop-color='%23013597'/%3e%3cstop%20offset='0.66'%20stop-color='%23013fb0'/%3e%3cstop%20offset='0.81'%20stop-color='%230049ca'/%3e%3cstop%20offset='1'%20stop-color='%230053e5'/%3e%3c/linearGradient%3e%3clinearGradient%20id='linear-gradient-3'%20x1='93.28'%20y1='171.67'%20x2='101.05'%20y2='179.44'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20offset='0'%20stop-color='%23e689f1'/%3e%3cstop%20offset='0.17'%20stop-color='%23d17def'/%3e%3cstop%20offset='0.31'%20stop-color='%23ba72ed'/%3e%3cstop%20offset='0.45'%20stop-color='%239f69eb'/%3e%3cstop%20offset='0.6'%20stop-color='%238160e9'/%3e%3cstop%20offset='0.73'%20stop-color='%235a59e7'/%3e%3cstop%20offset='0.94'%20stop-color='%230053e5'/%3e%3c/linearGradient%3e%3cclipPath%20id='clip-path'%20transform='translate(0%2026.51)'%3e%3ccircle%20id='SVGID'%20class='cls-1'%20cx='66.99'%20cy='27.25'%20r='26.99'/%3e%3c/clipPath%3e%3clinearGradient%20id='linear-gradient-4'%20x1='28.68'%20y1='26.99'%20x2='82.66'%20y2='26.99'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20offset='0'%20stop-color='%23fc545d'/%3e%3cstop%20offset='0.18'%20stop-color='%23f57'/%3e%3cstop%20offset='0.34'%20stop-color='%23ff5a91'/%3e%3cstop%20offset='0.5'%20stop-color='%23ff63ab'/%3e%3cstop%20offset='0.64'%20stop-color='%23fe6ec4'/%3e%3cstop%20offset='0.81'%20stop-color='%23f47bdc'/%3e%3cstop%20offset='1'%20stop-color='%23e689f1'/%3e%3c/linearGradient%3e%3clinearGradient%20id='linear-gradient-5'%20x1='142.5'%20y1='126.15'%20x2='200'%20y2='126.15'%20gradientTransform='translate(226.35%20-79.28)%20rotate(68.64)'%20xlink:href='%23linear-gradient-4'/%3e%3c/defs%3e%3cg%20id='Layer_2'%20%3e%3cg%20id='Layer_1-2'%20%3e%3ccircle%20class='cls-2'%20cx='95.41'%20cy='159.14'%20r='79.58'/%3e%3crect%20class='cls-3'%20x='58.02'%20y='121.26'%20width='75.77'%20height='75.77'/%3e%3cpath%20class='cls-4'%20d='M105.51,159.39H81.11v30.14a6.14,6.14,0,0,0,6.14,6.14h0a6.14,6.14,0,0,0,6.15-6.14V176.15a2.1,2.1,0,0,1,2.1-2.1h0a2.1,2.1,0,0,1,2.11,2.1v13.38a6.14,6.14,0,0,0,6.14,6.14h0a6.15,6.15,0,0,0,6.15-6.14V159.39Z'%20transform='translate(0%2026.51)'/%3e%3ccircle%20class='cls-5'%20cx='87.25'%20cy='216'%20r='6.14'/%3e%3ccircle%20class='cls-5'%20cx='103.74'%20cy='216.04'%20r='6.1'/%3e%3crect%20class='cls-6'%2
86160x='79.93'%20y='162.55'%20width='31.13'%20height='29.05'/%3e%3cpath%20class='cls-4'%20d='M112.19,131.75h3.28a6.63,6.63,0,0,1,6.63,6.63v22h-9.91Z'%20transform='translate(0%2026.51)'/%3e%3cpath%20class='cls-4'%20d='M79.32,139.44a5.26,5.26,0,0,1-4.77-3.05L62.78,111.07a5.25,5.25,0,1,1,9.53-4.43L84.08,132a5.26,5.26,0,0,1-4.76,7.48Z'%20transform='translate(0%2026.51)'/%3e%3cpath%20class='cls-4'%20d='M81.23,155.71h28.54a2.89,2.89,0,0,1,2.89,2.89v29a0,0,0,0,1,0,0H78.34a0,0,0,0,1,0,0v-29A2.89,2.89,0,0,1,81.23,155.71Z'/%3e%3ccircle%20class='cls-5'%20cx='117.7'%20cy='187.05'%20r='4.71'/%3e%3ccircle%20class='cls-5'%20cx='67.49'%20cy='135.24'%20r='5.5'/%3e%3cpath%20class='cls-7'%20d='M110.66,122.25v-7.19H80.34v7.19a18.45,18.45,0,0,1-.85,5.57h0a23.73,23.73,0,0,0,32,0h0A18.76,18.76,0,0,1,110.66,122.25Z'%20transform='translate(0%2026.51)'/%3e%3crect%20class='cls-4'%20x='71.54'%20y='128.26'%20width='47.91'%20height='9.94'%20rx='1.68'/%3e%3ccircle%20class='cls-4'%20cx='95.5'%20cy='134.37'%20r='21.46'/%3e%3cpath%20class='cls-5'%20d='M113.79,115.11c1.16-6.43.8-10.72.19-13.35A52.6,52.6,0,0,0,95.5,98.6,52.6,52.6,0,0,0,77,101.76c-.61,2.63-1,6.92.19,13.35,3.51,5.59,10.38,9.4,18.29,9.4S110.28,120.7,113.79,115.11Z'%20transform='translate(0%2026.51)'/%3e%3ccircle%20class='cls-8'%20cx='86.04'%20cy='134.19'%20r='4.11'/%3e%3ccircle%20class='cls-9'%20cx='84.28'%20cy='138.18'%20r='2.96'/%3e%3cpolygon%20class='cls-10'%20points='97.17%20167.78%2091.48%20177.63%20102.85%20177.63%2097.17%20167.78'/%3e%3cpolygon%20class='cls-5'%20points='95.5%20164.9%2088.15%20177.63%2091.48%20177.63%2097.17%20167.78%2095.5%20164.9'/%3e%3cline%20class='cls-4'%20x1='66.99'%20y1='99.63'%20x2='66.99'%20y2='133.88'/%3e%3ccircle%20class='cls-11'%20cx='66.99'%20cy='53.75'%20r='26.99'/%3e%3cpath%20class='cls-5'%20d='M78.33,59.16A2.34,2.34,0,0,0,76,56.84a2.33,2.33,0,1,0,0-4.65H58a2.33,2.33,0,1,0,0,4.65,2.33,2.33,0,1,0,0,4.65,2.32,2.32,0,1,0,0,4.64H76a2.32,2.32,0,1,0,0-4.64A2.34,2.34,0,0,0,78.33,59.16Z'%20transform='translate(0%2026.51)'/%3e%3cpath%20class='cls-5'%20d='M67,74.82a7.15,7.15,0,0,1-7.15-7.14h3.89a3.26,3.26,0,1,0,6.51,0h3.89A7.14,7.14,0,0,1,67,74.82Z'%20transform='translate(0%2026.51)'/%3e%3cg%20class='cls-12'%3e%3ccircle%20class='cls-13'%20cx='55.67'%20cy='26.99'%20r='26.99'/%3e%3c/g%3e%3cpath%20class='cls-8'%20d='M79.47,27.25,59.25,15.56V38.93Z'%20transform='translate(0%2026.51)'/%3e%3ccircle%20class='cls-14'%20cx='66.99'%20cy='53.75'%20r='26.99'/%3e%3cpath%20class='cls-8'%20d='M154.16,149.93l2.21,3.83h-4.43Z'%20transform='translate(0%2026.51)'/%3e%3cpath%20class='cls-11'%20d='M154.69,121.32a1.92,1.92,0,0,1-1.91-1.92h1a.88.88,0,1,0,1.75,0h1A1.92,1.92,0,0,1,154.69,121.32Z'%20transform='translate(0%2026.51)'/%3e%3cpath%20class='cls-15'%20d='M126.2,179.77h4.48v4.48H126.2Z'%20transform='translate(0%2026.51)'/%3e%3cpath%20class='cls-16'%20d='M144.57,143h4.48v4.48h-4.48Z'%20transform='translate(0%2026.51)'/%3e%3cpath%20class='cls-11'%20d='M156,164.76a2.23,2.23,0,0,0,2.24-2.23H157a1,1,0,1,1-2,0h-1.22A2.23,2.23,0,0,0,156,164.76Z'%20transform='translate(0%2026.51)'/%3e%3cpath%20class='cls-11'%20d='M64.15,189l2.59,4.47H61.57Z'%20transform='translate(0%2026.51)'/%3e%3cpath%20class='cls-8'%20d='M135.39,189.82l.86-.86,1.37,1.37L139,189l.86.86-1.37,1.37,1.37,1.37-.86.86-1.37-1.37-1.37,1.37-.86-.86,1.37-1.37Z'%20transform='translate(0%2026.51)'/%3e%3cpath%20class='cls-11'%20d='M146.79,170.59l2.59,4.47h-5.17Z'%20transform='translate(0%2026.51)'/%3e%3cpath%20class='cls-5'%20d='M73.34,179.78l2.59,4.47H70.76Z'%20transform='translate(0%2026.51)'/%3e%3cpath%20class='cls-16'%20d='M103.13,69.59H98.65v4.48h4.48Z'%20transform='translate(0%2026.51)'/%3e%3cpath%20class='cls-11'%20d='M147.53,124.66l.82.82-1.45,1.45,1.45,1.46-.82.81-2.27-2.27Z'%20transform='translate(0%2026.51)'/%3e%3cpath%20class='cls-15'%20d='M149,99.34a2.24,2.24,0,1,1-2.23-2.24A2.23,2.23,0,0,1,149,99.34Z'%20transform='translate(0%2026.51)'/%3e%3cpath%20class='cls-11'%20d='M120,60.38l.82.82-1.46,1.46,1.46,1.45-.82.82-2.28-2.27Z'%20transform='translate(0%2026.51)'/%3e%3cpath%20class='cls-8'%20d='M91.73,63.77a2.23,2.23,0,0,1-2.23-2.23h1.21a1,1,0,1,0,2,0H94A2.23,2.23,0,0,1,91.73,63.77Z'%20transform='translate(0%2026.51)'/%3e%3cpath%20class='cls-8'%20d='M137.6,78.77,135,83.25h5.17Z'%20transform='translate(0%2026.51)'/%3e%3cpath%20class='cls-11'%2
86160d='M120,78.74l.82.82L119.37,81l1.45,1.46-.82.81L117.73,81Z'%20transform='translate(0%2026.51)'/%3e%3cpath%20class='cls-11'%20d='M73.35,78.77l-2.58,4.48h5.17Z'%20transform='translate(0%2026.51)'/%3e%3cpath%20class='cls-15'%20d='M25.21,133.86h4.48v4.48H25.21Z'%20transform='translate(0%2026.51)'/%3e%3cpath%20class='cls-16'%20d='M43.57,163.65a2.24,2.24,0,1,0,2.24-2.24A2.23,2.23,0,0,0,43.57,163.65Z'%20transform='translate(0%2026.51)'/%3e%3cpath%20class='cls-11'%20d='M43.58,143.91l.86-.86,1.37,1.38,1.37-1.38.86.86-1.37,1.37L48,146.66l-.86.85-1.37-1.37-1.37,1.37-.86-.85L45,145.28Z'%20transform='translate(0%2026.51)'/%3e%3cpath%20class='cls-11'%20d='M28.15,156.74l.82-.82-1.46-1.45L29,153l-.82-.82-2.27,2.27Z'%20transform='translate(0%2026.51)'/%3e%3cpath%20class='cls-8'%20d='M45.79,124.69l-2.58,4.48h5.17Z'%20transform='translate(0%2026.51)'/%3e%3cpath%20class='cls-11'%20d='M36.63,109.67a2.23,2.23,0,0,1-2.23-2.23h1.21a1,1,0,0,0,2,0h1.21A2.23,2.23,0,0,1,36.63,109.67Z'%20transform='translate(0%2026.51)'/%3e%3cpath%20class='cls-5'%20d='M190.26,133.67c-2.29,5.85-12.67,7.26-23.18,3.15s-17.18-12.19-14.89-18,7.89,5,18.4,9.07S192.55,127.82,190.26,133.67Z'%20transform='translate(0%2026.51)'/%3e%3cellipse%20class='cls-17'%20cx='171.25'%20cy='126.15'%20rx='5.85'%20ry='30.78'%20transform='translate(-8.62%20266.19)%20rotate(-68.64)'/%3e%3cpath%20class='cls-4'%20d='M160.34,118.37c-.5,1.27,4.52,4.42,11.2,7s12.51,3.71,13,2.44c0,0,0,0,0,0a13.2,13.2,0,0,0-24.21-9.46S160.34,118.35,160.34,118.37Z'%20transform='translate(0%2026.51)'/%3e%3cpath%20class='cls-18'%20d='M31,195.62a5.06,5.06,0,1,1-5.06-5.05A5.07,5.07,0,0,1,31,195.62Z'%20transform='translate(0%2026.51)'/%3e%3cpath%20class='cls-11'%20d='M7.32,125.05,10,127.68l-4.68,4.68L10,137.05l-2.63,2.63L0,132.36Z'%20transform='translate(0%2026.51)'/%3e%3cpath%20class='cls-19'%20d='M163.15,57.19l-2.29-2.28-3.65,3.65-3.66-3.65-2.28,2.28,3.65,3.66-3.65,3.65,2.28,2.28,3.66-3.65,3.65,3.65,2.29-2.28-3.66-3.65Z'%20transform='translate(0%2026.51)'/%3e%3c/g%3e%3c/g%3e%3c/svg%3e", "" + import.meta.url).href; 8617var noSearchResultsImageHorizontal = new URL("data:image/svg+xml,%3csvg%20id='Layer_1'%20data-name='Layer%201'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20viewBox='0%200%201188.18%20660.55'%3e%3cdefs%3e%3cstyle%3e.cls-1,.cls-15{fill:none;}.cls-2{fill:%230053e5;stroke-width:1.89px;}.cls-11,.cls-15,.cls-19,.cls-2,.cls-3,.cls-4,.cls-7{stroke:%2303194f;stroke-miterlimit:10;}.cls-17,.cls-19,.cls-3,.cls-5{fill:%2303194f;}.cls-3{stroke-width:1.6px;}.cls-11,.cls-16,.cls-4,.cls-8{fill:%23f8f6f1;}.cls-19,.cls-4,.cls-7{stroke-width:1.7px;}.cls-6{fill:url(%23linear-gradient);}.cls-12,.cls-7{fill:%23e689f1;}.cls-9{fill:url(%23linear-gradient-2);}.cls-10{fill:url(%23linear-gradient-3);}.cls-11{stroke-width:1.19px;}.cls-13{clip-path:url(%23clip-path);}.cls-14{fill:url(%23linear-gradient-4);}.cls-15{stroke-width:1.72px;}.cls-16,.cls-17,.cls-19{fill-rule:evenodd;}.cls-18{fill:url(%23linear-gradient-5);}.cls-20{fill:%23fc545d;}%3c/style%3e%3clinearGradient%20id='linear-gradient'%20x1='507.1'%20y1='496.58'%20x2='631.52'%20y2='496.58'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20offset='0'%20stop-color='%23e689f1'/%3e%3cstop%20offset='0.19'%20stop-color='%23d17def'/%3e%3cstop%20offset='0.35'%20stop-color='%23ba72ed'/%3e%3cstop%20offset='0.5'%20stop-color='%239f69eb'/%3e%3cstop%20offset='0.66'%20stop-color='%238160e9'/%3e%3cstop%20offset='0.81'%20stop-color='%235a59e7'/%3e%3cstop%20offset='1'%20stop-color='%230053e5'/%3e%3c/linearGradient%3e%3clinearGradient%20id='linear-gradient-2'%20x1='516.1'%20y1='332.76'%20x2='532.82'%20y2='349.48'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20offset='0'%20stop-color='%2303194f'/%3e%3cstop%20offset='0.18'%20stop-color='%23032266'/%3e%3cstop%20offset='0.35'%20stop-color='%23022b7e'/%3e%3cstop%20offset='0.5'%20stop-color='%23013597'/%3e%3cstop%20offset='0.66'%20stop-color='%23013fb0'/%3e%3cstop%20offset='0.81'%20stop-color='%230049ca'/%3e%3cstop%20offset='1'%20stop-color='%230053e5'/%3e%3c/linearGradient%3e%3clinearGradient%20id='linear-gradient-3'%20x1='560.45'%20y1='474.96'%20x2='591.49'%20y2='506.01'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20offset='0'%20stop-color='%23e689f1'/%3e%3cstop%20offset='0.17'%20stop-color='%23d17def'/%3e%3cstop%20offset='0.31'%20stop-color='%23ba72ed'/%3e%3cstop%20offset='0.45'%20stop-color='%239f69eb'/%3e%3cstop%20offset='0.6'%20stop-color='%238160e9'/%3e%3cstop%20offset='0.73'%20stop-color='%235a59e7'/%3e%3cstop%20offset='0.94'%20stop-color='%230053e5'/%3e%3c/linearGradient%3e%3cclipPath%20id='clip-path'%20transform='translate(-421.33%20-190.11)'%3e%3ccircle%20id='SVGID'%20class='cls-1'%20cx='877.4'%20cy='339.6'%20r='75.06'/%3e%3c/clipPath%3e%3clinearGradient%20id='linear-gradient-4'%20x1='349.55'%20y1='75.06'%20x2='499.66'%20y2='75.06'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20offset='0'%20stop-color='%23fc545d'/%3e%3cstop%20offset='0.18'%20stop-color='%23f57'/%3e%3cstop%20offset='0.34'%20stop-color='%23ff5a91'/%3e%3cstop%20offset='0.5'%20stop-color='%23ff63ab'/%3e%3cstop%20offset='0.64'%20stop-color='%23fe6ec4'/%3e%3cstop%20offset='0.81'%20stop-color='%23f47bdc'/%3e%3cstop%20offset='1'%20stop-color='%23e689f1'/%3e%3c/linearGradient%3e%3clinearGradient%20id='linear-gradient-5'%20x1='1379.69'%20y1='558.7'%20x2='1609.51'%20y2='558.7'%20gradientTransform='translate(1470.47%20-1036.73)%20rotate(68.64)'%20xlink:href='%23linear-gradient-4'/%3e%3c/defs%3e%3crect%20class='cls-2'%20x='21.06'%20y='273.49'%20width='1093.88'%20height='331.44'/%3e%3crect%20class='cls-3'%20x='428.88'%20y='296.59'%20width='284.08'%20height='284.08'/%3e%3cpath%20class='cls-4'%20d='M1030.65,721.94H933.13V825.26a24.56,24.56,0,0,0,24.56,24.55h0a24.55,24.55,0,0,0,24.55-24.55V788.94a8.42,8.42,0,0,1,8.42-8.42h0a8.42,8.42,0,0,1,8.42,8.42v36.32a24.55,24.55,0,0,0,24.55,24.55h0a24.56,24.56,0,0,0,24.56-24.55V721.94Z'%20transform='translate(-421.33%20-190.11)'/%3e%3ccircle%20class='cls-5'%20cx='536.33'%20cy='634.98'%20r='24.55'/%3e%3ccircle%20class='cls-5'%20cx='602.26'%20cy='635.15'%20r='24.39'/%3e%3crect%20class='cls-6'%2
86170x='507.1'%20y='438.53'%20width='124.42'%20height='116.11'/%3e%3cpath%20class='cls-4'%20d='M1057.36,611.45h13.1A26.51,26.51,0,0,1,1097,638v87.81h-39.61Z'%20transform='translate(-421.33%20-190.11)'/%3e%3cpath%20class='cls-4'%20d='M926,642.18A21,21,0,0,1,906.91,630l-47-101.22A21,21,0,0,1,898,511.1l47,101.21a21,21,0,0,1-19,29.87Z'%20transform='translate(-421.33%20-190.11)'/%3e%3cpath%20class='cls-4'%20d='M511.13,411.17H627.5a10.39,10.39,0,0,1,10.39,10.39V538.5a0,0,0,0,1,0,0H500.74a0,0,0,0,1,0,0V421.56A10.39,10.39,0,0,1,511.13,411.17Z'/%3e%3ccircle%20class='cls-5'%20cx='658.03'%20cy='536.45'%20r='18.83'/%3e%3ccircle%20class='cls-5'%20cx='457.35'%20cy='329.37'%20r='21.97'/%3e%3cpath%20class='cls-7'%20d='M1051.22,573.51V544.75H930.07v28.76a74.57,74.57,0,0,1-3.4,22.24h0a94.86,94.86,0,0,0,127.95,0h0A74.57,74.57,0,0,1,1051.22,573.51Z'%20transform='translate(-421.33%20-190.11)'/%3e%3crect%20class='cls-4'%20x='473.56'%20y='301.48'%20width='191.51'%20height='39.73'%20rx='6.03'/%3e%3ccircle%20class='cls-4'%20cx='569.31'%20cy='325.87'%20r='85.76'/%3e%3cpath%20class='cls-5'%20d='M1063.75,544.94c4.66-25.67,3.21-42.83.74-53.34-20.88-8-46.34-12.64-73.85-12.64s-53,4.69-73.84,12.64c-2.47,10.51-3.92,27.67.74,53.34,14,22.37,41.5,37.57,73.1,37.57S1049.72,567.31,1063.75,544.94Z'%20transform='translate(-421.33%20-190.11)'/%3e%3ccircle%20class='cls-8'%20cx='531.51'%20cy='325.16'%20r='16.43'/%3e%3ccircle%20class='cls-9'%20cx='524.46'%20cy='341.12'%20r='11.83'/%3e%3cpolygon%20class='cls-10'%20points='575.97%20459.44%20553.24%20498.81%20598.7%20498.81%20575.97%20459.44'/%3e%3cpolygon%20class='cls-5'%20points='569.31%20447.91%20539.93%20498.81%20553.24%20498.81%20575.97%20459.44%20569.3
86171%20447.91'/%3e%3cline%20class='cls-11'%20x1='456.07'%20y1='277.07'%20x2='456.07'%20y2='372.34'/%3e%3ccircle%20class='cls-12'%20cx='456.07'%20cy='149.49'%20r='75.06'/%3e%3cpath%20class='cls-5'%20d='M909,428.36a6.48,6.48,0,0,0-6.46-6.46,6.46,6.46,0,1,0,0-12.92H852.32a6.46,6.46,0,0,0,0,12.92,6.47,6.47,0,0,0,0,12.93,6.46,6.46,0,0,0,0,12.92h50.17a6.46,6.46,0,1,0,0-12.92A6.48,6.48,0,0,0,909,428.36Z'%20transform='translate(-421.33%20-190.11)'/%3e%3cpath%20class='cls-5'%20d='M877.4,471.92A19.9,19.9,0,0,1,857.53,452h10.81a9.07,9.07,0,1,0,18.13,0h10.81A19.9,19.9,0,0,1,877.4,471.92Z'%20transform='translate(-421.33%20-190.11)'/%3e%3cg%20class='cls-13'%3e%3ccircle%20class='cls-14'%20cx='424.61'%20cy='75.06'%20r='75.06'/%3e%3c/g%3e%3cpath%20class='cls-8'%20d='M912.13,339.6l-56.25-32.5v65Z'%20transform='translate(-421.33%20-190.11)'/%3e%3ccircle%20class='cls-15'%20cx='456.07'%20cy='149.49'%20r='75.06'/%3e%3cpath%20class='cls-8'%20d='M1225.1,684.11l8.86,15.33h-17.72Z'%20transform='translate(-421.33%20-190.11)'/%3e%3cpath%20class='cls-12'%20d='M1227.25,569.77a7.66,7.66,0,0,1-7.66-7.65h4.17a3.49,3.49,0,1,0,7,0h4.16A7.66,7.66,0,0,1,1227.25,569.77Z'%20transform='translate(-421.33%20-190.11)'/%3e%3cpath%20class='cls-16'%20d='M1324.83,619.89h17.9V637.8h-17.9Z'%20transform='translate(-421.33%20-190.11)'/%3e%3cpath%20class='cls-17'%20d='M1186.77,656.59h17.91V674.5h-17.91Z'%20transform='translate(-421.33%20-190.11)'/%3e%3cpath%20class='cls-12'%20d='M1232.4,743.42a8.94,8.94,0,0,0,8.93-8.93h-4.85a4.08,4.08,0,0,1-8.15,0h-4.86A9,9,0,0,0,1232.4,743.42Z'%20transform='translate(-421.33%20-190.11)'/%3e%3cpath%20class='cls-12'%20d='M526.39,699.44l10.33,17.88H516.06Z'%20transform='translate(-421.33%20-190.11)'/%3e%3cpath%20class='cls-8'%20d='M1292.18,702.25l3.43-3.43,5.49,5.49,5.48-5.49,3.43,3.43-5.49,5.49,5.49,5.48-3.43,3.43-5.48-5.49-5.49,5.49-3.43-3.43,5.49-5.48Z'%20transform='translate(-421.33%20-190.11)'/%3e%3cpath%20class='cls-12'%20d='M1195.67,766.69,1206,784.57h-20.67Z'%20transform='translate(-421.33%20-190.11)'/%3e%3cpath%20class='cls-5'%20d='M636.69,745.4,647,763.28H626.36Z'%20transform='translate(-421.33%20-190.11)'/%3e%3cpath%20class='cls-17'%20d='M1466.82,736.44h-17.91v17.9h17.91Z'%20transform='translate(-421.33%20-190.11)'/%3e%3cpath%20class='cls-12'%20d='M1198.62,583.12l3.27,3.27-5.81,5.81,5.81,5.82-3.27,3.27-9.08-9.09Z'%20transform='translate(-421.33%20-190.11)'/%3e%3cpath%20class='cls-16'%20d='M1204.66,481.92a8.95,8.95,0,1,1-8.94-8.94A8.95,8.95,0,0,1,1204.66,481.92Z'%20transform='translate(-421.33%20-190.11)'/%3e%3cpath%20class='cls-16'%20d='M645.64,688.92a8.95,8.95,0,1,1-8.95-8.95A8.95,8.95,0,0,1,645.64,688.92Z'%20transform='translate(-421.33%20-190.11)'/%3e%3cpath%20class='cls-12'%20d='M1333.26,556.47l3.27,3.26-5.82,5.82,5.82,5.81-3.27,3.27-9.08-9.08Z'%20transform='translate(-421.33%20-190.11)'/%3e%3cpath%20class='cls-8'%20d='M636.69,615.92a8.94,8.94,0,0,1-8.92-8.93h4.85a4.08,4.08,0,0,0,8.15,0h4.85A8.94,8.94,0,0,1,636.69,615.92Z'%20transform='translate(-421.33%20-190.11)'/%3e%3cpath%20class='cls-8'%20d='M1498.92,702.42l-10.33,17.88h20.67Z'%20transform='translate(-421.33%20-190.11)'/%3e%3cpath%20class='cls-12'%20d='M1431.43,702.27l3.27,3.27-5.81,5.82,5.81,5.81-3.27,3.27-9.08-9.08Z'%20transform='translate(-421.33%20-190.11)'/%3e%3cpath%20class='cls-12'%20d='M699.35,547.52,689,565.41h20.67Z'%20transform='translate(-421.33%20-190.11)'/%3e%3cpath%20class='cls-16'%20d='M709.69,619.89h17.9V637.8h-17.9Z'%20transform='translate(-421.33%20-190.11)'/%3e%3cpath%20class='cls-17'%20d='M783.09,739A8.95,8.95,0,1,0,792,730,8.95,8.95,0,0,0,783.09,739Z'%20transform='translate(-421.33%20-190.11)'/%3e%3cpath%20class='cls-12'%20d='M783.12,660.07l3.43-3.43,5.48,5.49,5.49-5.49,3.43,3.43-5.49,5.48L801,671l-3.43,3.43L792,669l-5.48,5.49L783.12,671l5.49-5.49Z'%20transform='translate(-421.33%20-190.11)'/%3e%3cpath%20class='cls-12'%20d='M721.46,711.36l3.27-3.27-5.82-5.82,5.82-5.81-3.27-3.27-9.09,9.08Z'%20transform='translate(-421.33%20-190.11)'/%3e%3cpath%20class='cls-8'%20d='M792,583.26l-10.34,17.88H802.3Z'%20transform='translate(-421.33%20-190.11)'/%3e%3cpath%20class='cls-12'%20d='M755.35,523.21a9,9,0,0,1-8.93-8.93h4.86a4.07,4.07,0,0,0,8.14,0h4.86A8.94,8.94,0,0,1,755.35,523.21Z'%20transform='translate(-421.33%20-190.11)'/%3e%3cpath%20class='cls-5'%20d='M1570.6,588.73c-9.15,23.4-50.64,29-92.67,12.59s-68.68-48.73-59.53-72.12S1449.94,549,1492,565.43,1579.75,565.34,1570.6,588.73Z'%20transform='translate(-421.33%20-190.11)'/%3e%3cellipse%20class='cls-18'%20cx='1494.6'%20cy='558.7'%20rx='23.4'%20ry='123.04'%20transform='translate(8.51%201556.98)%20rotate(-68.64)'/%3e%3cpath%20class='cls-4'%20d='M1451,527.57c-2,5.08,18.06,17.68,44.79,28.13s50,14.81,52,9.73c0-.06,0-.11,0-.13A52.78,52.78,0,0,0,1451,527.45S1451,527.52,1451,527.57Z'%20transform='translate(-421.33%20-190.11)'/%3e%3cpath%20class='cls-19'%20d='M462.6,628.85a20.21,20.21,0,1,1-20.2-20.21A20.21,20.21,0,0,1,462.6,628.85Z'%20transform='translate(-421.33%20-190.11)'/%3e%3cpath%20class='cls-12'%20d='M566,584.66l10.53,10.53-18.73,18.72,18.73,18.73L566,643.16l-29.25-29.25Z'%20transform='translate(-421.33%20-190.11)'/%3e%3cpath%20class='cls-20'%20d='M1348.56,454.32l-9.12-9.12-14.61,14.61-14.61-14.61-9.12,9.12,14.61,14.61-14.61,14.61,9.12,9.13,14.61-14.61,14.61,14.61,9.12-9.13L1334,468.93Z'%20transform='translate(-421.33%20-190.11)'/%3e%3cpath%20class='cls-4'%20d='M1494.63,664.17a46.57,46.57,0,0,0-36.87-18.06,47.45,47.45,0,0,0-8.49.78,46.69,46.69,0,0,0-74.5,17.28Z'%20transform='translate(-421.33%20-190.11)'/%3e%3cpath%20class='cls-4'%20d='M618.68,523a52,52,0,0,0-9.32.86,51.23,51.23,0,0,0-57.68-7.44A55.46,55.46,0,0,0,471,542.81H659.16A51.17,51.17,0,0,0,618.68,523Z'%20transform='translate(-421.33%20-190.11)'/%3e%3c/svg%3e", "" + import.meta.url).href; 8618var StyledEmptyPanelWrapper = newStyled.div` 8619 width: 100%; 8620 display: flex; 8621 flex-direction: column; 8622 align-items: center; 8623 align-self: center; 8624`; 8625var StyledNoSearchResultsImg = newStyled.img` 8626 width: ${(props) => props.imgWidth || "21%"}; 8627`; 8628var NoSearchResults = (props) => { 8629 return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(StyledEmptyPanelWrapper, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_material.Typography, { 8630 variant: "subtitle1", 8631 sx: titleSxProps, 8632 align: "center", 8633 children: [ 8634 "No results for \"", 8635 props.searchedValue, 8636 "\"" 8637 ] 8638 }
8638), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledNoSearchResultsImg, { 8639 imgWidth: props.imgWidth, 8640 src: props.isHorizontal ? noSearchResultsImageHorizontal : noSearchResultsImage, 8641 alt: "", 8642 "data-testid": "data-test-no-results-image" 8643 })] }); 8644}; 8645var titleSxProps = { 8646 width: "100%", 8647 maxWidth: "1000px", 8648 whiteSpace: "nowrap", 8649 overflow: "hidden", 8650 textOverflow: "ellipsis", 8651 color: "text.secondary" 8652}; 8653//#endregion 8654//#region client/components/editor/Components/TruffleEditingWorkSpace/Components/Libraries/Components/TruffleMediaLibrary/MediaTabNoSearchResult.tsx 8655var MediaTabNoSearchResult = ({ searchValue }) => { 8656 return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Box, { 8657 sx: { marginRight: "16px" }, 8658 children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(NoSearchResults, { 8659 searchedValue: searchValue, 8660 imgWidth: "200.5px" 8661 }) 8662 }); 8663}; 8664//#endregion 8665//#region client/components/editor/Components/TruffleEditingWorkSpace/Components/Libraries/Components/TruffleMediaLibrary/RemoveAssetDialog.tsx 8666var removeAsset = async (asset) => { 8667 if (await deleteTruffleAssetMedia(asset.id)) setSuccessNotification({ message: "Media asset deleted" }); 8668 else setErrorNotification({ 8669 message: "Media asset failed to delete", 8670 showCloseButton: true, 8671 actionButton: { 8672 label: "Try Again", 8673 onClick: () => removeAsset(asset) 8674 } 8675 }); 8676}; 8677var RemoveAssetDialog = (props) => { 8678 const handleRemoveClick = () => { 8679 props.close(); 8680 props.closeThreeDotsMenu(); 8681 removeAsset(props.asset); 8682 }; 8683 return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_material.Dialog, { 8684 open: props.open, 8685 sx: { ".MuiDialog-paper": { width: "600px" } }, 8686 TransitionProps: { onExited: props.onClosed }, 8687 children: [ 8688 /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.DialogTitle, { children: "Delete Media?" }), 8689 /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.DialogContent, { 8690 sx: { padding: "8px 32px" }, 8691 children: `This action will delete ${props.asset.name}` 8692 }), 8693 /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_material.DialogActions, { 8694 sx: { padding: "8px 16px" }, 8695 children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Button, { 8696 variant: "text", 8697 onClick: props.close, 8698 "data-tracking-id": "tracking-id-media-lib-remove-asset-cancel", 8699 children: "Cancel" 8700 }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Button, { 8701 variant: "contained", 8702 onClick: handleRemoveClick, 8703 "data-tracking-id": "tracking-id-media-lib-remove-asset-confirm", 8704 children: "Delete" 8705 })] 8706 }) 8707 ] 8708 }); 8709}; 8710//#endregion 8711//#region client/components/editor/Components/TruffleEditingWorkSpace/Components/Libraries/Components/TruffleMediaLibrary/RemoveFolderDialog.tsx 8712var deleteFolder = async (folder) => { 8713 if ((await deleteEditorAssetFolder(folder.id)).result === GqlClientDeleteEditorAssetFolderResult.SUCCESS) setSuccessNotification({ message: "Folder deleted" }); 8714 else setErrorNotification({ message: "Folder failed to delete" }); 8715}; 8716var RemoveFolderDialog = (props) => { 8717 const [loading, setLoading] = (0, import_react.useState)(false); 8718 const handleRemoveClick = () => { 8719 setLoading(true); 8720 deleteFolder(props.folder).then(() => { 8721 props.close(); 8722 props.closeThreeDotsMenu(); 8723 }); 8724 }; 8725 return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dist$3.SimpleInputDialog, { 8726 open: props.open, 8727 dialogTitle: "Delete folder?", 8728 primaryActionButtonText: "Delete", 8729 secondaryActionButtonText: "Cancel", 8730 PrimaryActionButtonProps: { 8731 onClick: handleRemoveClick, 8732 "data-tracking-id": "tracking-id-media-lib-delete-folder-confirm", 8733 color: "error", 8734 loading 8735 }, 8736 SecondaryActionButtonProps: { 8737 onClick: props.close, 8738 "data-tracking-id": "tracking-id-media-lib-delete-folder-cancel" 8739 }, 8740 CloseIconButtonProps: { onClick: props.close }, 8741 maxWidth: "sm", 8742 TransitionProps: { onExited: props.onClosed }, 8743 children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Box, { 8744 sx: { 8745 display: "flex", 8746 flexDirection: "column", 8747 gap: "24px" 8748 }, 8749 children: `The '${props.folder.name}' folder and all the media assets and folders it contains will be deleted.` 8750 }) 8751 }); 8752}; 8753//#endregion 8754//#region client/components/editor/Components/TruffleEditingWorkSpace/Components/Libraries/Components/TruffleMediaLibrary/RemoveMultipleItemsDialog.tsx 8755var RemoveMultipleItemsDialog = (props) => { 8756 const { trackingOrigin } = (0, import_react.useContext)(TruffleMediaLibraryContext); 8757 const { availableAssetsInYourLibraryById, foldersById } = useAssetLibraryMedia(); 8758 const [mutate, { loading }] = useDeleteEditorAssetMediaAndFoldersMutation({ 8759 onCompleted() { 8760 setSuccessNotification({ message: `${props.selectedItems.size} ${itemsTitle} deleted` }); 8761 props.close(); 8762 props.disableMultiSelect(); 8763 }, 8764 onError() { 8765 setErrorNotification({ message: "Delete failed. Try again." }); 8766 props.close(); 8767 } 8768 }); 8769 const selectedFolders = []; 8770 const selectedAssets = []; 8771 for (const id of props.selectedItems) { 8772 const folder = foldersById.get(id); 8773 if (folder) selectedFolders.push(folder); 8774 const asset = availableAssetsInYourLibraryById[id]; 8775 if (asset) selectedAssets.push(asset); 8776 } 8777 const foldersOnly = !!selectedFolders.length && !selectedAssets.length; 8778 const assetsOnly = !!selectedAssets.length && !selectedFolders.length; 8779 const itemsTitle = (foldersOnly ? "folder" : "item") + (props.selectedItems.size === 1 ? "" : "s"); 8780 const itemsContentText = assetsOnly ? "These items will be permanently deleted and cannot be recovered." : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [ 8781 "Deleting folders will also delete all the files and subfolders inside them.",
8782 /* @__PURE__ */ (0, import_jsx_runtime.jsx)("br", {}), 8783 "This action is permanent and cannot be undone." 8784 ] }); 8785 const selectedFolderNames = selectedFolders.sort((a, b) => a.name.localeCompare(b.name)).map((folder) => folder.name); 8786 const selectedAssetNames = selectedAssets.sort((a, b) => a.name.localeCompare(b.name)).map((asset) => asset.name); 8787 const allSelectedItemNames = [...foldersOnly ? selectedFolderNames : selectedFolderNames.map((name) => `${name} (folder)`), ...selectedAssetNames]; 8788 const [confirmation, setConfirmation] = (0, import_react.useState)(""); 8789 const handleDeleteClick = () => { 8790 mutate({ variables: { input: { 8791 folders: selectedFolders.map((folder) => folder.id), 8792 assets: selectedAssets.map((asset) => asset.id) 8793 } } }); 8794 PendoService.getInstance().trackEvent("Batch media asset action", { 8795 action: "delete", 8796 itemCount: (selectedFolders.length + selectedAssets.length).toString(), 8797 origin: trackingOrigin 8798 }); 8799 }; 8800 return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_material.Dialog, { 8801 open: props.open, 8802 onClose: props.close, 8803 children: [ 8804 /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_dist$3.TruffleDialogTitle, { 8805 CloseIconButtonProps: { onClick: props.close }, 8806 children: [ 8807 "Delete ", 8808 props.selectedItems.size, 8809 " ", 8810 itemsTitle, 8811 "?" 8812 ] 8813 }), 8814 /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_material.DialogContent, { children: [
8815 /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Typography, { 8816 variant: "body1", 8817 children: itemsContentText 8818 }), 8819 /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_dist$3.TruffleAccordion, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dist$3.TruffleAccordionSummary, { text: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Typography, { 8820 variant: "body1", 8821 children: "See all items" 8822 }) }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dist$3.TruffleAccordionDetails, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ol", { 8823 style: { 8824 marginBlock: 0, 8825 paddingInlineStart: "20px" 8826 }, 8827 children: allSelectedItemNames.map((name) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Typography, { 8828 variant: "body1", 8829 children: name 8830 }) }, name)) 8831 }) })] }), 8832 !!selectedFolderNames.length && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.TextField, { 8833 fullWidth: true, 8834 size: "medium", 8835 variant: "outlined", 8836 placeholder: "Type âDELETEâ to continue", 8837 autoComplete: "off", 8838 value: confirmation, 8839 onChange: (e) => setConfirmation(e.target.value) 8840 }) 8841 ] }), 8842 /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_material.DialogActions, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Button, { 8843 variant: "text", 8844 size: "large", 8845 color: "primary", 8846 onClick: props.close, 8847 children: "Cancel" 8848 }), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_material.Button, { 8849 variant: "contained", 8850 size: "large", 8851 color: "error", 8852 loading, 8853 disabled: !!selectedFolderNames.length && confirmation.toLowerCase() !== "delete", 8854 onClick: handleDeleteClick, 8855 children: [ 8856 "Delete ", 8857 props.selectedItems.size, 8858 " ", 8859 itemsTitle 8860 ] 8861 })] }) 8862 ] 8863 }); 8864}; 8865//#endregion 8866//#region client/components/editor/Components/TruffleEditingWorkSpace/Components/Libraries/Components/TruffleMediaLibrary/YourLibraryTab/EmptyFolder.tsx 8867var cloudUploadIcon = new URL("data:image/svg+xml,%3csvg%20width='61'%20height='43'%20viewBox='0%200%2061%2043'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M53.771%2019.5729C54.0522%2018.6354%2054.2397%2017.6979%2054.2397%2016.6666C54.2397%2010.9479%2049.4585%206.16663%2043.7397%206.16663C42.146%206.16663%2040.646%206.54163%2039.2397%207.19788C36.2397%202.97913%2031.271%200.166626%2025.7397%200.166626C16.8335%200.166626%209.61475%207.19788%209.23975%2016.0104C3.896%2017.8854%200.239746%2022.9479%200.239746%2028.6666C0.239746%2036.1666%206.23975%2042.1666%2013.7397%2042.1666H48.2397C54.8022%2042.1666%2060.2397%2036.8229%2060.2397%2030.1666C60.2397%2025.7604%2057.8022%2021.7291%2053.771%2019.5729ZM47.771%2039.1666H14.2085C8.771%2039.1666%203.80225%2035.2291%203.23975%2029.7916C2.67725%2024.5416%206.146%2019.8541%2010.9272%2018.5416C11.6772%2018.2604%2012.2397%2017.5104%2012.2397%2016.7604C12.2397%2016.7604%2012.2397%2016.7604%2012.2397%2016.6666C12.146%2011.0416%2015.7085%205.79163%2021.0522%204.01038C27.8022%201.76038%2034.0835%204.57288%2037.271%209.72913C37.7397%2010.5729%2038.9585%2010.8541%2039.896%2010.2916C41.4897%209.35413%2043.4585%208.97913%2045.521%209.44788C48.0522%2010.0104%2050.1147%2011.9791%2050.8647%2014.4166C51.4272%2016.2916%2051.2397%2018.0729%2050.5835%2019.5729C50.2085%2020.5104%2050.771%2021.5416%2051.7085%2021.8229C55.271%2023.3229%2057.6147%2026.9791%2057.146%2031.1979C56.5835%2035.8854%2052.4585%2039.1666%2047.771%2039.1666ZM23.771%2022.2916L28.7397%2017.3229V33.1666C28.7397%2034.0104%2029.396%2034.6666%2030.2397%2034.6666C30.9897%2034.6666%2031.7397%2034.0104%2031.7397%2033.1666V17.3229L36.6147%2022.2916C37.1772%2022.8541%2038.2085%2022.8541%2038.771%2022.2916C39.3335%2021.7291%2039.3335%2020.6979%2038.771%2020.1354L31.271%2012.6354C30.9897%2012.3541%2030.6147%2012.1666%2030.2397%2012.1666C29.771%2012.1666%2029.396%2012.3541%2029.1147%2012.6354L21.6147%2020.1354C21.0522%2020.6979%2021.0522%2021.7291%2021.6147%2022.2916C22.1772%2022.8541%2023.2085%2022.8541%2023.771%2022.2916Z'%20fill='url(%23paint0_linear_6233_46233)'/%3e%3cdefs%3e%3clinearGradient%20id='paint0_linear_6233_46233'%20x1='14.9766'%20y1='-2.83337'%20x2='59.0559'%20y2='26.1661'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-color='%23EB89F1'/%3e%3cstop%20offset='0.142857'%20stop-color='%23D47FEF'/%3e%3cstop%20offset='0.285714'%20stop-color='%23C175EE'/%3e%3cstop%20offset='0.428571'%20stop-color='%23AB6DEC'/%3e%3cstop%20offset='0.571429'%20stop-color='%239365EB'/%3e%3cstop%20offset='0.714286'%20stop-color='%23775EE9'/%3e%3cstop%20offset='0.857143'%20stop-color='%235358E7'/%3e%3cstop%20offset='1'%20stop-color='%230053E5'/%3e%3c/linearGradient%3e%3c/defs%3e%3c/svg%3e", "" + import.meta.url).href; 8868var EmptyFolder = (props) => { 8869 const imageUploadSizeLimitMB = getImageMaxUploadFileSizeMB(); 8870 const videoUploadSizeLimitMB = getVideoMaxUploadFileSizeMB(); 8871 return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_material.Box, { 8872 className: "media-grid-content", 8873 sx: containerSxProps$5, 8874 children: [
8875 /* @__PURE__ */ (0, import_jsx_runtime.jsx)("img", { 8876 src: cloudUploadIcon, 8877 width: "80", 8878 alt: "no-assets", 8879 style: { marginTop: "24px" } 8880 }), 8881 /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Typography, { 8882 variant: "h3", 8883 color: "secondary.main", 8884 sx: { mt: "16px" }, 8885 children: props.isRoot ? "Library is Empty" : "Folder is Empty" 8886 }), 8887 /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Typography, { 8888 variant: "body1", 8889 color: "text.primary", 8890 sx: { 8891 mt: "16px", 8892 textAlign: "center" 8893 }, 8894 children: props.isRoot ? "Fill up your library by uploading your own media or adding media from stock" : "Populate this folder by uploading your own media or adding media from stock" 8895 }), 8896 /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_material.Button, { 8897 variant: "outlined", 8898 size: "medium", 8899 sx: { mt: "16px" }, 8900 "aria-label": "Upload Media", 8901 component: "label", 8902 "data-tracking-id": "tracking-id-media-lib-empty-folder-upload-btn", 8903 children: ["Upload Media", /* @__PURE__ */ (0, import_jsx_runtime.jsx)("input", { 8904 hidden: true, 8905 accept: [...fileExtByMediaType[AcceptedFileTypes.Image.toLowerCase()], ...fileExtByMediaType[AcceptedFileTypes.Video.toLowerCase()]].join(","), 8906 type: "file", 8907 onChange: props.onUpload, 8908 multiple: true 8909 })] 8910 }), 8911 /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_material.Typography, { 8912 sx: { marginTop: "auto" }, 8913 variant: "caption", 8914 color: "text.primary", 8915 align: "center", 8916 component: "p", 8917 children: [ 8918 "Image format: jpg, png, gif. Size: Up to ", 8919 imageUploadSizeLimitMB, 8920 "MB" 8921 ] 8922 }), 8923 /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_material.Typography, { 8924 sx: { marginBottom: "8px" }, 8925 variant: "caption", 8926 color: "text.primary", 8927 align: "center", 8928 component: "p", 8929 children: [ 8930 "Video format: mov, flv, mp4, webm. Size: Up to ", 8931 videoUploadSizeLimitMB, 8932 "MB" 8933 ] 8934 }) 8935 ] 8936 }); 8937}; 8938var containerSxProps$5 = { 8939 height: "100%", 8940 marginRight: "16px", 8941 display: "flex", 8942 flexDirection: "column", 8943 alignItems: "center" 8944}; 8945//#endregion 8946//#region client/components/assets/AssetMediaDetailsTable.tsx 8947var AssetMediaDetailsTable = (props) => { 8948 const { open, onClose, dialogTitle, assetMedia, additionalColumns } = props; 8949 const tableHeaders = [{ 8950 name: "Stock media assets", 8951 propName: "stock_media_assets" 8952 }].concat(additionalColumns ? additionalColumns.map((column) => ({ 8953 name: column.title, 8954 propName: column.title 8955 })) : []); 8956 const sortedAssetMedia = (0, import_react.useMemo)(() => assetMedia.sort((a, b) => a.name.localeCompare(b.name)), [assetMedia]); 8957 const createTableRows = (rowsData) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.TableBody, { children: rowsData.map((media) => { 8958 return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_material.TableRow, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.TableCell, { 8959 sx: tableCellSxProps, 8960 children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_material.Box, { 8961 sx: { 8962 display: "flex", 8963 alignItems: "center", 8964 gap: "8px" 8965 }, 8966 children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dist$3.ThumbnailActions, { 8967 ContentProps: { sx: { 8968 width: "156px", 8969 height: "88px" 8970 } }, 8971 children: media.mediaMetadata?.mediaType === EditorLibraryMediaType.Video ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(VideoThumbnail, { 8972 videoUrl: media.mediaUrl, 8973 posterUrl: media.mediaPreviewUrl, 8974 duration: media.mediaMetadata?.duration || 0, 8975 loading: false, 8976 onLoadedData: () => {}, 8977 objectFit: "cover" 8978 }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ImageThumbnail, { 8979 url: media.mediaPreviewUrl, 8980 description: media.description, 8981 objectFit: "cover" 8982 }) 8983 }), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_material.Box, { 8984 width: "240px", 8985 children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dist$3.TypographyWithTooltipOnOverflow, { 8986 variant: "body2", 8987 color: "text.primary", 8988 children: media.name 8989 }
8989), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dist$3.TypographyWithTooltipOnOverflow, { 8990 variant: "body2", 8991 color: "text.secondary", 8992 children: media.description 8993 })] 8994 })] 8995 }) 8996 }), additionalColumns?.map((column, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.TableCell, { 8997 sx: tableCellSxProps, 8998 children: column.value(media) 8999 }, `additional-column-${column.title}-${index}`))] }, `sortable-row-${media.name}`); 9000 }) }); 9001 const createTableHeaders = (headers, sort) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.TableHead, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.TableRow, { children: headers.map((header, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dist$3.SortableTableHeadCell, { 9002 onSort: () => sort(header), 9003 children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Box, { children: header.name }) 9004 }, `header-${header.name}-${index}`)) }) }); 9005 return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_material.Dialog, { 9006 sx: assetMediaDetailsDialogSxProps, 9007 maxWidth: "md", 9008 open, 9009 onClose, 9010 children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dist$3.TruffleDialogTitle, { 9011 CloseIconButtonProps: { onClick: onClose }, 9012 children: dialogTitle 9013 }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.DialogContent, { 9014 sx: assetMediaDetailsDialogContentSxProps, 9015 children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dist$3.SortableTable, { 9016 tableData: { 9017 headers: tableHeaders, 9018 rows: sortedAssetMedia || [] 9019 }, 9020 stickyHeader: true, 9021 renderTableHead: ({ sort, headers }) => createTableHeaders(headers, sort), 9022 children: (tableRows) => createTableRows(tableRows) 9023 }) 9024 })] 9025 }); 9026}; 9027var assetMediaDetailsDialogSxProps = { "& .MuiDialog-paper": { minWidth: void 0 } }; 9028var assetMediaDetailsDialogContentSxProps = { "&.MuiDialogContent-root": { 9029 paddingRight: "8px", 9030 paddingTop: "0" 9031} }; 9032var tableCellSxProps = { padding: "8px 16px" }; 9033//#endregion 9034//#region client/components/editor/Components/TruffleEditingWorkSpace/Components/Libraries/Components/TruffleMediaLibrary/YourLibraryTab/HiddenGettyExpiredMediaNotification.tsx 9035var HiddenGettyExpiredMediaNotification = (props) => { 9036 const { hiddenGettyPremiumExpiredMedia, dismissGettyApiChangeMessage } = props; 9037 const [showAssetDetails, setShowAssetDetails] = import_react.useState(false); 9038 const { pathFromRootToFoldersById } = useAssetLibraryMedia(); 9039 return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Container$1, { 9040 elevation: 0, 9041 children: [ 9042 /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(TitleContainer, { children: [
9043 /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SyncIcon, { icon: import_faInfoCircle.faInfoCircle }), 9044 /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Typography, { 9045 variant: "subtitle2", 9046 flexGrow: 1, 9047 children: "Media libraries updated" 9048 }), 9049 /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_material.Box, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.IconButton, { 9050 size: "medium", 9051 color: "default", 9052 "data-tracking-id": "tracking-id-media-lib-expired-asset-notification-learn-more-btn", 9053 onClick: handleLearnMoreClick, 9054 children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FontAwesomeIcon, { icon: import_faCircleQuestion.faCircleQuestion }) 9055 }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.IconButton, { 9056 size: "medium", 9057 color: "default", 9058 "data-tracking-id": "tracking-id-media-lib-expired-asset-notification-dismiss-btn", 9059 onClick: () => dismissGettyApiChangeMessage(), 9060 children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FontAwesomeIcon, { icon: import_faXmark.faXmark }) 9061 })] }) 9062 ] }), 9063 /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_material.Typography, { 9064 variant: "body1", 9065 children: ["Due to changes in the Getty Stock Library, some of the stock media assets in Your Media have expired and are no longer available to use. ", /* @__PURE__ */ (0, import_jsx_runtime.jsx)("strong", { children: "Expired media already placed in scenes will not be affected." })] 9066 }), 9067 /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Box, { 9068 sx: { marginLeft: "auto" }, 9069 children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Button, { 9070 size: "medium", 9071 color: "primary", 9072 variant: "text", 9073 component: "button", 9074 "data-tracking-id": "tracking-id-media-lib-expired-asset-notification-view-assets-btn", 9075 onClick: () => setShowAssetDetails(true), 9076 children: "View expired media" 9077 }) 9078 }) 9079 ] 9080 }
9080), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AssetMediaDetailsTable, { 9081 dialogTitle: "Expired stock media assets", 9082 open: showAssetDetails, 9083 onClose: () => setShowAssetDetails(false), 9084 assetMedia: hiddenGettyPremiumExpiredMedia, 9085 additionalColumns: [{ 9086 title: "Folder", 9087 value: (media) => { 9088 return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dist$3.TypographyWithTooltipOnOverflow, { 9089 width: "320px", 9090 variant: "body2", 9091 children: pathFromRootToFoldersById.get(media.folder?.id)?.map((item) => item.name).join(" / ") || "" 9092 }); 9093 } 9094 }] 9095 })] }); 9096}; 9097function handleLearnMoreClick(event) { 9098 openArticleInHelpCenter({ 9099 buttonId: "75f8e4ac-6934-480a-96a9-cc36677fc24c", 9100 anchorRef: event.currentTarget, 9101 trackingSource: InAppHelpCenterTrackingSource.Editor, 9102 trackingDialogName: "Media Library - Expired Premium Getty Assets" 9103 }); 9104} 9105var Container$1 = (0, import_material.styled)(import_material.Paper)({ 9106 display: "flex", 9107 flexDirection: "column", 9108 gap: "8px", 9109 padding: "16px", 9110 height: "fit-content", 9111 background: "#EFF7FE", 9112 marginRight: "16px" 9113}); 9114var TitleContainer = (0, import_material.styled)(import_material.Box)({ 9115 display: "flex", 9116 flexDirection: "row", 9117 alignItems: "center", 9118 gap: "8px" 9119}); 9120var SyncIcon = (0, import_material.styled)(FontAwesomeIcon)(({ theme }) => ({ 9121 width: "16px", 9122 height: "16px", 9123 color: theme.palette.info.main 9124})); 9125//#endregion 9126//#region client/components/editor/Components/TruffleEditingWorkSpace/Components/Libraries/Components/TruffleMediaLibrary/YourLibraryTab/YourLibraryTab.tsx 9127var mediaTypeFilter = (mediaType, asset) => { 9128 switch (mediaType) { 9129 case MediaLibraryFilterMediaType.ALL: return true; 9130 case MediaLibraryFilterMediaType.IMAGES: return asset.mediaMetadata.mediaType === EditorLibraryMediaType.Image; 9131 case MediaLibraryFilterMediaType.IMAGES_AND_ANIMATIONS: return asset.mediaMetadata.mediaType === EditorLibraryMediaType.Image || !!asset.mediaAgifUrl; 9132 case MediaLibraryFilterMediaType.VIDEOS: return asset.mediaMetadata.mediaType === EditorLibraryMediaType.Video; 9133 default: throw new Error(`Unknown media type: ${mediaType}`); 9134 } 9135}; 9136var mediaSourceFilter = (mediaSource, asset) => { 9137 switch (mediaSource) { 9138 case MediaLibraryFilterMediaSource.ALL: return asset.mediaOrigin === GqlClientMediaOrigin.USER || asset.mediaOrigin === GqlClientMediaOrigin.EXTERNAL || asset.mediaOrigin === GqlClientMediaOrigin.RECORDER || asset.mediaOrigin === GqlClientMediaOrigin.AI_GENERATED; 9139 case MediaLibraryFilterMediaSource.USER: return asset.mediaOrigin === GqlClientMediaOrigin.USER; 9140 case MediaLibraryFilterMediaSource.GETTY: return asset.mediaOrigin === GqlClientMediaOrigin.EXTERNAL && asset.externalLibrary === GqlClientExternalLibrary.GETTY; 9141 case MediaLibraryFilterMediaSource.ACQUIA_DAM: return asset.mediaOrigin === GqlClientMediaOrigin.EXTERNAL && asset.externalLibrary === GqlClientExternalLibrary.ACQUIA; 9142 case MediaLibraryFilterMediaSource.AI_IMAGE: return asset.mediaOrigin === GqlClientMediaOrigin.AI_GENERATED; 9143 default: throw new Error(`Unknown media source: ${mediaSource}`); 9144 } 9145}; 9146var videoDurationFilter = (asset, minDuration, maxDuration) => asset.mediaMetadata.mediaType !== EditorLibraryMediaType.Video || (minDuration === 0 || asset.mediaMetadata.duration >= minDuration) && (maxDuration === 600 || asset.mediaMetadata.duration <= maxDuration + 1); 9147var searchFilter = (itemsToCompare, searchValue) => !searchValue || itemsToCompare.some((item) => item.toLowerCase().includes(searchValue.toLowerCase())); 9148var caseInsensitiveComparator = (a, b) => a.localeCompare(b, "en", { sensitivity: "base" }); 9149var SORT_MAP = { 9150 [MediaLibrarySortBy.LAST_ADDED]: { 9151 [MediaLibrarySortDirection.BOTTOM_TO_TOP]: (a, b) => new Date(a.created).getTime() - new Date(b.created).getTime(), 9152 [MediaLibrarySortDirection.TOP_TO_BOTTOM]: (a, b) => new Date(b.created).getTime() - new Date(a.created).getTime() 9153 }, 9154 [MediaLibrarySortBy.A_Z]: { 9155 [MediaLibrarySortDirection.TOP_TO_BOTTOM]: (a, b) => caseInsensitiveComparator(a.name, b.name), 9156 [MediaLibrarySortDirection.BOTTOM_TO_TOP]: (a, b) => caseInsensitiveComparator(b.name, a.name) 9157 } 9158}; 9159var PREVIEW_NO_ITEM_INDEX = -1;
9160function calcNextPreviewItemIndex(gridItems, previewItemIndex) { 9161 if (previewItemIndex == PREVIEW_NO_ITEM_INDEX) return PREVIEW_NO_ITEM_INDEX; 9162 for (let nextIndex = previewItemIndex + 1; nextIndex < gridItems.length; ++nextIndex) if (gridItems[nextIndex]?.type === ItemType.YOUR_LIBRARY) return nextIndex; 9163 return PREVIEW_NO_ITEM_INDEX; 9164} 9165function calcPrevPreviewItemIndex(gridItems, previewItemIndex) { 9166 if (previewItemIndex == PREVIEW_NO_ITEM_INDEX) return PREVIEW_NO_ITEM_INDEX; 9167 for (let prevIndex = previewItemIndex - 1; prevIndex >= 0; --prevIndex) if (gridItems[prevIndex]?.type === ItemType.YOUR_LIBRARY) return prevIndex; 9168 return PREVIEW_NO_ITEM_INDEX; 9169} 9170var YourLibraryTab = ({ isConnectedToDam, onConvertImageToVideoFromLibrary, ...props }) => { 9171 const { searchValue, setSearchValue, filterMediaType, filterMediaSource, filterMinVideoDuration, filterMaxVideoDuration, sortBy, sortDirection, currentFolderId, setCurrentFolderId, clearFilters, setActiveTab, multiSelectItems, enableMultiSelect, disableMultiSelect, selectedItemData, addItemToMultiSelect, removeItemFromMultiSelect, trackingOrigin } = (0, import_react.useContext)(TruffleMediaLibraryContext); 9172 const { folderFound, name, parentFolder, media, folders, selectedFolderId, rootFolder, foldersByParentFolderId, foldersById, mediaByFolderId } = getMediaFolder(currentFolderId); 9173 (0, import_react.useEffect)(() => { 9174 if (currentFolderId && !folderFound) setCurrentFolderId(null); 9175 }, [currentFolderId, folderFound]); 9176 const { currentViewType } = useMediaLibraryViewType(); 9177 const { createUploadHandler } = useUploadMediaAssets(currentFolderId, void 0, void 0, void 0, !props.isRecordingEnabled); 9178 const [previewItemIndex, setPreviewItemIndex] = (0, import_react.useState)(PREVIEW_NO_ITEM_INDEX); 9179 const [isNewFolderDialogOpen, setIsNewFolderDialogOpen] = (0, import_react.useState)(false); 9180 const [assetThreeDotsMenuAnchor, setAssetThreeDotsMenuAnchor] = (0, import_react.useState)(null); 9181 const [assetThreeDotsMenuAssetId, setAssetThreeDotsMenuAssetId] = (0, import_react.useState)(null); 9182 const [folderThreeDotsMenuAnchor, setFolderThreeDotsMenuAnchor] = (0, import_react.useState)(null); 9183 const [folderThreeDotsMenuFolderId, setFolderThreeDotsMenuFolderId] = (0, import_react.useState)(null); 9184 const [selectFolderDialogOpen, setSelectFolderDialogOpen] = (0, import_react.useState)(false); 9185 const [removeAssetDialogOpen, setRemoveAssetDialogOpen] = (0, import_react.useState)(false); 9186 const [removeFolderDialogOpen, setRemoveFolderDialogOpen] = (0, import_react.useState)(false); 9187 const [removeMultipleItemsDialogOpen, setRemoveMultipleItemsDialogOpen] = (0, import_react.useState)(false); 9188 const searchValueSetterRef = (0, import_react.useRef)(); 9189 const filteredAndSearchedFolderItems = (0, import_react.useMemo)(() => folders.filter((folder) => searchFilter([folder.name], searchValue)).sort(SORT_MAP[sortBy][sortDirection]).map((folder) => ({ 9190 type: ItemType.FOLDER, 9191 id: folder.id, 9192 name: folder.name, 9193 parentFolderId: folder.parentFolder?.id, 9194 updated: folder.updated, 9195 updatedBy: folder.updatedBy, 9196 created: folder.created, 9197 createdBy: folder.createdBy 9198 })), [ 9199 folders, 9200 searchValue, 9201 sortBy, 9202 sortDirection 9203 ]); 9204 const nonPremiumGettyFilter = generateAssetNonGettyPremiumFilter(); 9205 const acquiaOptionInMediaSourceFilter = isConnectedToDam || media.some((asset) => asset.externalLibrary === GqlClientExternalLibrary.ACQUIA); 9206 const assetItems = media.filter((asset) => asset.lifecycleStage === GqlClientAssetLifecycleStage.ENABLED && asset.mediaClassification !== GqlClientMediaClassification.HIDDEN && nonPremiumGettyFilter(asset) && mediaSourceFilter(MediaLibraryFilterMediaSource.ALL, asset) && mediaTypeFilter(MediaLibraryFilterMediaType.ALL, asset)); 9207 const filteredAssetItems = assetItems.filter((asset) => mediaSourceFilter(filterMediaSource, asset) && mediaTypeFilter(filterMediaType, asset) && videoDurationFilter(asset, filterMinVideoDuration, filterMaxVideoDuration)); 9208 const filteredAndSearchedAssetItems = (0, import_react.useMemo)(() => { 9209 const isNonGettyPremium = generateAssetNonGettyPremiumFilter(); 9210 return media.filter((asset) => asset.lifecycleStage === GqlClientAssetLifecycleStage.ENABLED && asset.mediaClassification !== GqlClientMediaClassification.HIDDEN && isNonGettyPremium(asset) && mediaSourceFilter(filterMediaSource, asset) && mediaTypeFilter(filterMediaType, asset) && videoDurationFilter(asset, filterMinVideoDuration, filterMaxVideoDuration) && searchFilter([asset.name, asset.description || ""], searchValue)).sort(SORT_MAP[sortBy][sortDirection]).map((asset) => ({ 9211 type: ItemType.YOUR_LIBRARY, 9212 id: asset.id, 9213 name: asset.name, 9214 mediaType: asset.mediaMetadata.mediaType, 9215 origin: asset.mediaOrigin, 9216 classification: asset.mediaClassification, 9217 externalLibrary: asset.externalLibrary, 9218 mediaUrl: asset.mediaUrl, 9219 mediaAgifUrl: asset.mediaAgifUrl, 9220 thumbnailUrl: asset.mediaPreviewUrl, 9221 mediaLocation: asset.mediaLocation, 9222 size: asset.mediaMetadata.size, 9223 resolution: asset.mediaMetadata.mediaDimensions, 9224 format: asset.mediaMetadata.format, 9225 duration: asset.mediaMetadata.duration, 9226 description: asset.description, 9227 createdAt: new Date(asset.created), 9228 createdBy: asset.createdBy, 9229 parentFolderId: asset.folder.id, 9230 sourceMediaContributions: asset.sourceMediaContributions ?? [] 9231 })); 9232 }, [ 9233 media, 9234 filterMediaSource, 9235 filterMediaType, 9236 filterMinVideoDuration, 9237 filterMaxVideoDuration, 9238 searchValue, 9239 sortBy, 9240 sortDirection 9241 ]); 9242 const isEmptyFolder = folders.length === 0 && assetItems.length === 0; 9243 const isEmptyFilteredFolder = folders.length === 0 && filteredAssetItems.length === 0; 9244 const noSearchResults = filteredAndSearchedFolderItems.length === 0 && filteredAndSearchedAssetItems.length === 0; 9245 const gridItems = (0, import_react.useMemo)(() => [...filteredAndSearchedFolderItems, ...filteredAndSearchedAssetItems], [filteredAndSearchedFolderItems, filteredAndSearchedAssetItems]);
9246 const nextPreviewItemIndex = calcNextPreviewItemIndex(gridItems, previewItemIndex); 9247 const prevPreviewItemIndex = calcPrevPreviewItemIndex(gridItems, previewItemIndex); 9248 const previewItem = previewItemIndex != PREVIEW_NO_ITEM_INDEX ? gridItems[previewItemIndex] : null; 9249 const handleUpload = (0, import_react.useCallback)((e) => { 9250 createUploadHandler(UploadOrigin.COMPUTER_BROWSE)([...e.target.files]); 9251 e.target.value = null; 9252 }, [createUploadHandler]); 9253 const toggleNewFolderDialogState = () => { 9254 setIsNewFolderDialogOpen(!isNewFolderDialogOpen); 9255 }; 9256 const onNewFolderConfirm = async (folderName) => { 9257 const folderId = await createEditorAssetFolder(folderName, selectedFolderId); 9258 props.showFolderActionsSuccess && setSuccessNotification({ 9259 message: `${folderName} created`, 9260 showCloseButton: true, 9261 actionButton: { 9262 label: "Open Folder", 9263 onClick: () => { 9264 setCurrentFolderId(folderId); 9265 closeNotification(); 9266 }, 9267 dataTrackingId: "tracking-id-media-lib-new-folder-open", 9268 dataTestId: "test-id-media-lib-new-folder-open" 9269 } 9270 }); 9271 props.onFolderCreated?.(folderId); 9272 }; 9273 const handleClosePreviewDialog = () => { 9274 setPreviewItemIndex(PREVIEW_NO_ITEM_INDEX); 9275 if (previewItem) setTimeout(() => { 9276 assetGridEventTarget.scrollToAsset(previewItem.id); 9277 }, 0); 9278 }; 9279 const clearFiltersAndSearch = () => { 9280 clearFilters(); 9281 setSearchValue(""); 9282 searchValueSetterRef.current?.(""); 9283 }; 9284 const handleAssetMenuClosed = (0, import_react.useCallback)(() => { 9285 if (!selectFolderDialogOpen && !removeAssetDialogOpen) setAssetThreeDotsMenuAssetId(null); 9286 }, [ 9287 selectFolderDialogOpen, 9288 removeAssetDialogOpen, 9289 setAssetThreeDotsMenuAssetId 9290 ]); 9291 const handleFolderMenuClosed = (0, import_react.useCallback)(() => { 9292 if (!selectFolderDialogOpen && !removeFolderDialogOpen) setFolderThreeDotsMenuFolderId(null); 9293 }, [ 9294 selectFolderDialogOpen, 9295 removeFolderDialogOpen, 9296 setFolderThreeDotsMenuFolderId 9297 ]); 9298 const { isLoadingUserAcceptedTerms, hasUserDismissedLibraryChangeMessage, dismissLibraryChangeMessage } = useEditorUsageAcceptance(GqlClientExternalLibrary.GETTY); 9299 const { availableAssetsInYourLibraryById, hiddenGettyPremiumExpiredMedia } = useAssetLibraryMedia(); 9300 (0, import_react.useEffect)(() => { 9301 if (assetGridEventTarget) assetGridEventTarget.scrollToTop(); 9302 if (searchValue !== "" || filterMediaType !== MediaLibraryFilterMediaType.ALL || filterMediaSource !== MediaLibraryFilterMediaSource.ALL || sortBy !== MediaLibrarySortBy.LAST_ADDED || sortDirection !== MediaLibrarySortDirection.TOP_TO_BOTTOM || filterMinVideoDuration !== 0 || filterMaxVideoDuration !== 600) PendoService.getInstance().trackEvent("Media lib search", { 9303 tab: "Your Media", 9304 searchValue, 9305 mediaType: filterMediaType.toLowerCase(), 9306 mediaSource: filterMediaSource.toLowerCase(), 9307 sortBy: sortBy.toLowerCase(), 9308 sortDirection: sortDirection.toLowerCase(), 9309 minVideoDuration: filterMinVideoDuration?.toString(), 9310 maxVideoDuration: filterMaxVideoDuration?.toString() 9311 }); 9312 }, [ 9313 assetGridEventTarget, 9314 searchValue, 9315 filterMediaType, 9316 filterMediaSource, 9317 filterMinVideoDuration, 9318 filterMaxVideoDuration, 9319 sortBy, 9320 sortDirection 9321 ]); 9322 (0, import_react.useEffect)(() => { 9323 if (!assetGridEventTarget) return; 9324 function handleScrollToAsset(event) { 9325 const isAssetInLibrary = !!availableAssetsInYourLibraryById[event.detail.id]; 9326 const assetIndex = gridItems.findIndex((item) => item.id === event.detail.id); 9327 if (isAssetInLibrary && assetIndex == -1) setNeutralNotification({ 9328 message: "The asset cannot be shown because it's currently filtered out", 9329 showCloseButton: true, 9330 actionButton: { 9331 label: "Clear Filters", 9332 onClick: () => { 9333 closeNotification(); 9334 clearFiltersAndSearch(); 9335 setTimeout(() => assetGridEventTarget.scrollToAsset(event.detail.id), 0); 9336 } 9337 } 9338 }); 9339 } 9340 assetGridEventTarget.addEventListener("scrollToAsset", handleScrollToAsset); 9341 return () => { 9342 assetGridEventTarget.removeEventListener("scrollToAsset", handleScrollToAsset); 9343 }; 9344 }, [assetGridEventTarget, gridItems]); 9345 const assetThreeDotsMenuAsset = (0, import_react.useMemo)(() => filteredAndSearchedAssetItems.find((asset) => asset.id === assetThreeDotsMenuAssetId), [filteredAndSearchedAssetItems, assetThreeDotsMenuAssetId]); 9346 const folderThreeDotsMenuFolder = (0, import_react.useMemo)(() => filteredAndSearchedFolderItems.find((folder) => folder.id === folderThreeDotsMenuFolderId), [filteredAndSearchedFolderItems, folderThreeDotsMenuFolderId]); 9347 const itemToMove = assetThreeDotsMenuAsset || folderThreeDotsMenuFolder;
9348 const setView = (view) => { 9349 if (view === null) return; 9350 setMediaLibraryViewType(view); 9351 }; 9352 const onMoveConfirm = async (targetFolderId) => { 9353 if (itemToMove.type === ItemType.YOUR_LIBRARY) await moveEditorAssetToFolder(itemToMove.id, itemToMove.name, targetFolderId, setActiveTab, setCurrentFolderId, props.onMoveComplete, props.showFolderActionsSuccess); 9354 else if (itemToMove.type === ItemType.FOLDER) await moveEditorFolderToFolder(itemToMove.id, itemToMove.name, targetFolderId, setActiveTab, setCurrentFolderId, props.onMoveComplete, props.showFolderActionsSuccess); 9355 }; 9356 const onMultiMoveConfirm = async (targetFolderId) => { 9357 await moveMediaItemsToFolder(assetItems.filter((asset) => multiSelectItems?.has(asset.id)).map((asset) => ({ 9358 id: asset.id, 9359 name: asset.name 9360 })), folders.filter((folder) => multiSelectItems?.has(folder.id)).map((folder) => ({ 9361 id: folder.id, 9362 name: folder.name 9363 })), targetFolderId, setActiveTab, setCurrentFolderId, disableMultiSelect, trackingOrigin); 9364 }; 9365 const showGettyLibraryChange = hiddenGettyPremiumExpiredMedia.length > 0 && !hasUserDismissedLibraryChangeMessage && !isLoadingUserAcceptedTerms; 9366 const onMultiSelectMove = () => { 9367 setSelectFolderDialogOpen(true); 9368 }; 9369 const onMultiSelectDelete = () => { 9370 setRemoveMultipleItemsDialogOpen(true); 9371 }; 9372 const multiSelectEnabled = multiSelectItems !== null; 9373 const multiSelectedCount = multiSelectItems?.size ?? 0; 9374 const [lastNonSequentialItemClicked, setLastNonSequentialItemClicked] = (0, import_react.useState)(null); 9375 const [temporarySequentialSelection, setTemporarySequentialSelection] = (0, import_react.useState)(null); 9376 (0, import_react.useEffect)(() => { 9377 if (!multiSelectEnabled) { 9378 setLastNonSequentialItemClicked(null); 9379 setTemporarySequentialSelection(null); 9380 } 9381 }, [multiSelectEnabled]); 9382 const sequentialModifierPressed = useKeyPressed(shift); 9383 const shiftItemClick = (itemData) => { 9384 enableMultiSelect(); 9385 if (temporarySequentialSelection) for (const item of temporarySequentialSelection) removeItemFromMultiSelect(item); 9386 if (lastNonSequentialItemClicked === null) if (selectedItemData) { 9387 setLastNonSequentialItemClicked(selectedItemData.id); 9388 const selectedItemIndex = gridItems.findIndex((gridItem) => gridItem.id === selectedItemData.id); 9389 const currentItemIndex = gridItems.findIndex((gridItem) => gridItem.id === itemData.id); 9390 const itemsToSelect = gridItems.slice(Math.min(selectedItemIndex, currentItemIndex), Math.max(selectedItemIndex, currentItemIndex) + 1).map((gridItem) => gridItem.id); 9391 setTemporarySequentialSelection(itemsToSelect.filter((item) => !multiSelectItems?.has(item))); 9392 for (const item of itemsToSelect) addItemToMultiSelect(item); 9393 } else { 9394 setLastNonSequentialItemClicked(itemData.id); 9395 addItemToMultiSelect(itemData.id); 9396 } 9397 else { 9398 const lastNonSequentialItemIndex = gridItems.findIndex((gridItem) => gridItem.id === lastNonSequentialItemClicked); 9399 const currentItemIndex = gridItems.findIndex((gridItem) => gridItem.id === itemData.id); 9400 const itemsToSelect = gridItems.slice(Math.min(lastNonSequentialItemIndex, currentItemIndex), Math.max(lastNonSequentialItemIndex, currentItemIndex) + 1).map((gridItem) => gridItem.id); 9401 setTemporarySequentialSelection(itemsToSelect.filter((item) => !multiSelectItems?.has(item))); 9402 for (const item of itemsToSelect) addItemToMultiSelect(item); 9403 } 9404 }; 9405 const onItemClick = (0, import_react.useCallback)((itemData) => { 9406 if (multiSelectEnabled) { 9407 setLastNonSequentialItemClicked(itemData.id); 9408 setTemporarySequentialSelection(null); 9409 } 9410 if (props.enableDragDrop === false) props.onItemClick(itemData); 9411 }, [ 9412 multiSelectEnabled, 9413 props.enableDragDrop, 9414 props.enableDragDrop === false ? props.onItemClick : void 0 9415 ]); 9416 const interactionProps = sequentialModifierPressed ? { 9417 ...props, 9418 enableDragDrop: false, 9419 onItemClick: shiftItemClick 9420 } : props.enableDragDrop === false ? { 9421 ...props, 9422 onItemClick 9423 } : props; 9424 return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [ 9425 /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_material.Box, { 9426 sx: containerSxProps$4, 9427 children: [
9428 showGettyLibraryChange && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(HiddenGettyExpiredMediaNotification, { 9429 dismissGettyApiChangeMessage: dismissLibraryChangeMessage, 9430 hiddenGettyPremiumExpiredMedia 9431 }), 9432 multiSelectEnabled ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(YourLibraryMultiSelectActionBar, { 9433 selectedCount: multiSelectedCount, 9434 onCancel: disableMultiSelect, 9435 onMove: onMultiSelectMove, 9436 onDelete: onMultiSelectDelete 9437 }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(YourLibraryActionBar, { 9438 activeView: currentViewType, 9439 onViewChange: setView, 9440 onNewFolderClick: toggleNewFolderDialogState, 9441 onSelectClick: enableMultiSelect 9442 }), 9443 /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DebouncedSearch, { 9444 sx: { marginRight: "16px" }, 9445 initialValue: searchValue, 9446 placeholder: "Search folders and media", 9447 numberOfResults: filteredAndSearchedFolderItems.length + filteredAndSearchedAssetItems.length, 9448 onChangeCallback: setSearchValue, 9449 disabled: isEmptyFilteredFolder, 9450 searchValueSetterRef 9451 }),
9452 /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FiltersSection, { 9453 hideMediaTypeFilter: props.hideMediaTypeFilter, 9454 mediaLibraryFilterMediaType: props.mediaLibraryFilterMediaType, 9455 acquiaOptionInMediaSourceFilter 9456 }), 9457 !!parentFolder && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FolderNavigation, { 9458 folderName: name, 9459 onBackClick: () => setCurrentFolderId(parentFolder.id), 9460 disabled: multiSelectEnabled 9461 }), 9462 /* @__PURE__ */ (0, import_jsx_runtime.jsx)(YourMediaDropzone, { 9463 disabled: multiSelectEnabled, 9464 onFileDropAccepted: createUploadHandler(UploadOrigin.COMPUTER_DRAG_AND_DROP), 9465 children: isEmptyFolder ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(EmptyFolder, { 9466 isRoot: !parentFolder, 9467 onUpload: handleUpload 9468 }) : isEmptyFilteredFolder ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(NoFilteredResults, { 9469 onClear: clearFilters, 9470 className: "media-grid-content" 9471 }) : noSearchResults ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MediaTabNoSearchResult, { searchValue }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(YourLibraryAssetGrid, { 9472 ...interactionProps, 9473 gridItems, 9474 onPreviewItem: setPreviewItemIndex, 9475 onNavigateItem: setCurrentFolderId, 9476 onUpload: handleUpload, 9477 setAssetThreeDotsMenuAssetId, 9478 setAssetThreeDotsMenuAnchor, 9479 setFolderThreeDotsMenuFolderId, 9480 setFolderThreeDotsMenuAnchor, 9481 onClearFiltersAndSearch: clearFiltersAndSearch, 9482 activeLibraryView: currentViewType, 9483 columns: props.columns, 9484 showFolderActionsSuccess: props.showFolderActionsSuccess, 9485 onMoveComplete: props.onMoveComplete, 9486 totalFoldersInLevel: folders?.length || 0, 9487 totalMediaAssetsInLevel: assetItems.length, 9488 multiSelectEnabled, 9489 onConvertImageToVideoFromLibrary 9490 }) 9491 }) 9492 ] 9493 }), 9494 /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AssetPreviewDialog, { 9495 name: previewItem?.name, 9496 url: previewItem?.mediaUrl, 9497 posterUrl: previewItem?.thumbnailUrl, 9498 isVideo: previewItem?.mediaType === EditorLibraryMediaType.Video, 9499 description: previewItem?.description, 9500 open: previewItemIndex != PREVIEW_NO_ITEM_INDEX, 9501 onClose: handleClosePreviewDialog, 9502 hasNext: nextPreviewItemIndex != PREVIEW_NO_ITEM_INDEX, 9503 onNext: () => nextPreviewItemIndex != PREVIEW_NO_ITEM_INDEX && setPreviewItemIndex(nextPreviewItemIndex), 9504 hasPrev: prevPreviewItemIndex != PREVIEW_NO_ITEM_INDEX, 9505 onPrev: () => prevPreviewItemIndex != PREVIEW_NO_ITEM_INDEX && setPreviewItemIndex(prevPreviewItemIndex), 9506 PaperProps: PreviewAssetDialogPaperProps 9507 }), 9508 /* @__PURE__ */ (0, import_jsx_runtime.jsx)(NewFolderDialog, { 9509 open: isNewFolderDialogOpen, 9510 onClose: toggleNewFolderDialogState, 9511 onConfirm: onNewFolderConfirm, 9512 getFolderNameErrorMessage: (newValue) => validateEditedFolderName(newValue, folders.map((folder) => folder.name)), 9513 trackingIdPrefix: "tracking-id-media-lib" 9514 }), 9515 assetThreeDotsMenuAsset && assetThreeDotsMenuAsset.type === ItemType.YOUR_LIBRARY && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AssetThreeDotsMenu, { 9516 asset: assetThreeDotsMenuAsset, 9517 anchor: assetThreeDotsMenuAnchor, 9518 closeMenu: () => setAssetThreeDotsMenuAnchor(null), 9519 onMenuClosed: handleAssetMenuClosed, 9520 openSelectFolderDialog: () => setSelectFolderDialogOpen(true), 9521 openRemoveAssetDialog: () => setRemoveAssetDialogOpen(true) 9522 }), 9523 multiSelectEnabled ? multiSelectedCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MoveToFolderDialog, { 9524 open: selectFolderDialogOpen, 9525 onClose: () => setSelectFolderDialogOpen(false), 9526 itemsToMoveDetails: [...folders.filter((item) => multiSelectItems?.has(item.id)).map((item) => ({ 9527 id: item.id, 9528 name: item.name, 9529 parentFolderId: item.parentFolder?.id, 9530 isFolder: true, 9531 typeDetails: { 9532 capitalizedTypeName: "Folder", 9533 article: "A" 9534 } 9535 })), ...assetItems.filter((item) => multiSelectItems?.has(item.id)).map((item) => ({ 9536 id: item.id, 9537 name: item.name, 9538 parentFolderId: item.folder?.id, 9539 isFolder: false, 9540 typeDetails: { 9541 capitalizedTypeName: "Asset", 9542 article: "An" 9543 } 9544 }))], 9545 action: MoveToFolderDialogActions.MOVE,
9546 rootFolderName: "Your Media", 9547 foldersById, 9548 foldersByParentFolderId, 9549 itemsByParentFolderId: void 0, 9550 initialFolderId: rootFolder?.id, 9551 onCreateNewFolder: createEditorAssetFolder, 9552 getFolderNameErrorMessage: validateEditedFolderName, 9553 onMoveConfirm: onMultiMoveConfirm, 9554 trackingIdentifier: "media-lib", 9555 forceMultiMode: true 9556 }) : itemToMove && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MoveToFolderDialog, { 9557 open: selectFolderDialogOpen, 9558 onClose: () => setSelectFolderDialogOpen(false), 9559 itemsToMoveDetails: [{ 9560 id: itemToMove.id, 9561 name: itemToMove.name, 9562 parentFolderId: itemToMove.parentFolderId, 9563 isFolder: itemToMove.type === ItemType.FOLDER, 9564 typeDetails: { 9565 capitalizedTypeName: itemToMove.type === ItemType.FOLDER ? "Folder" : "Asset", 9566 article: itemToMove.type === ItemType.FOLDER ? "A" : "An" 9567 } 9568 }], 9569 action: MoveToFolderDialogActions.MOVE, 9570 rootFolderName: "Your Media", 9571 foldersById, 9572 foldersByParentFolderId, 9573 itemsByParentFolderId: itemToMove.type === ItemType.FOLDER ? foldersByParentFolderId : mediaByFolderId, 9574 initialFolderId: rootFolder?.id, 9575 onCreateNewFolder: createEditorAssetFolder, 9576 getFolderNameErrorMessage: validateEditedFolderName, 9577 onMoveConfirm, 9578 trackingIdentifier: "media-lib" 9579 }), 9580 assetThreeDotsMenuAsset && assetThreeDotsMenuAsset.type === ItemType.YOUR_LIBRARY && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RemoveAssetDialog, { 9581 open: removeAssetDialogOpen, 9582 asset: assetThreeDotsMenuAsset, 9583 close: () => setRemoveAssetDialogOpen(false), 9584 onClosed: () => setAssetThreeDotsMenuAssetId(null), 9585 closeThreeDotsMenu: () => setAssetThreeDotsMenuAnchor(null) 9586 }), 9587 folderThreeDotsMenuFolder && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FolderThreeDotsMenu, { 9588 folder: folderThreeDotsMenuFolder, 9589 anchor: folderThreeDotsMenuAnchor, 9590 closeMenu: () => setFolderThreeDotsMenuAnchor(null), 9591 onMenuClosed: handleFolderMenuClosed, 9592 openSelectFolderDialog: () => setSelectFolderDialogOpen(true), 9593 openRemoveFolderDialog: () => setRemoveFolderDialogOpen(true) 9594 }), 9595 folderThreeDotsMenuFolder && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RemoveFolderDialog, { 9596 open: removeFolderDialogOpen, 9597 folder: folderThreeDotsMenuFolder, 9598 close: () => setRemoveFolderDialogOpen(false), 9599 onClosed: () => setFolderThreeDotsMenuFolderId(null), 9600 closeThreeDotsMenu: () => setFolderThreeDotsMenuAnchor(null) 9601 }), 9602 !!multiSelectItems?.size && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RemoveMultipleItemsDialog, { 9603 open: removeMultipleItemsDialogOpen, 9604 selectedItems: multiSelectItems, 9605 close: () => setRemoveMultipleItemsDialogOpen(false), 9606 disableMultiSelect 9607 }) 9608 ] }); 9609}; 9610var containerSxProps$4 = { 9611 display: "flex", 9612 flexDirection: "column", 9613 gap: "16px", 9614 width: "100%", 9615 height: "100%", 9616 minHeight: 0 9617}; 9618//#endregion 9619//#region client/components/editor/Components/TruffleEditingWorkSpace/Components/Libraries/Components/TruffleMediaLibrary/AssetGrid/StockAssetGrid.tsx 9620var StockAssetGrid = (props) => { 9621 return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AssetGrid, { 9622 items: (0, import_react.useMemo)(() => props.assets.map((asset) => ({ 9623 ...asset, 9624 enableDragDrop: props.enableDragDrop, 9625 onPreviewAsset: props.onPreviewAsset, 9626 onItemClick: props.enableDragDrop === false ? props.onItemClick : void 0, 9627 setAssetThreeDotsMenuAssetId: props.setAssetThreeDotsMenuAssetId, 9628 setAssetThreeDotsMenuAnchor: props.setAssetThreeDotsMenuAnchor 9629 })), [ 9630 props.assets, 9631 props.enableDragDrop, 9632 props.onPreviewAsset, 9633 props.enableDragDrop === false ? props.onItemClick : void 0, 9634 props.setAssetThreeDotsMenuAssetId, 9635 props.setAssetThreeDotsMenuAnchor 9636 ]), 9637 totalItemCount: props.totalAssetCount, 9638 RenderItem: GridItemRenderer$1, 9639 columnCount: props.columnCount, 9640 loadMoreItems: props.loadMoreAssets, 9641 rowGap: 16, 9642 itemWidth: 158, 9643 itemHeight: 115, 9644 activeLibraryView: GqlClientLibraryViewType.GRID 9645 }); 9646}; 9647var GridItemRenderer$1 = ({ index, data }) => { 9648 const [grabbed, setGrabbed] = (0, import_react.useState)(false); 9649 const { selectedItemData } = (0, import_react.useContext)(TruffleMediaLibraryContext); 9650 return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DraggableGridItem, { 9651 itemWidth: 158, 9652 itemHeight: 115, 9653 draggable: data.enableDragDrop, 9654 "aria-grabbed": grabbed, 9655 onDragStart: (e) => { 9656 if (data.enableDragDrop) { 9657 handleDragStart(e, data); 9658 setGrabbed(true); 9659 } 9660 }, 9661 onDragEnd: () => { 9662 if (data.enableDragDrop) { 9663 handleDragEnd(); 9664 setGrabbed(false); 9665 } 9666 }, 9667 children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AssetCard, { 9668 asset: data, 9669 loading: false, 9670 onPreview: () => { 9671 data.onPreviewAsset(index); 9672 }, 9673 selected: selectedItemData?.id === data.id, 9674 onClick: data.enableDragDrop === false ? (() => data.onItemClick(data)) : void 0, 9675 enableDragDrop: data.enableDragDrop, 9676 setThreeDotsMenuAssetId: data.setAssetThreeDotsMenuAssetId, 9677 setThreeDotsMenuAnchor: data.setAssetThreeDotsMenuAnchor, 9678 activeLibraryView: GqlClientLibraryViewType.GRID 9679 }) 9680 }); 9681}; 9682//#endregion 9683//#region client/components/editor/Components/TruffleEditingWorkSpace/Components/Libraries/Components/TruffleMediaLibrary/StockTab/GettyTermsAndConds.tsx 9684var GettyTermsAndConds = (props) => { 9685 const { onAcceptTermsAndConds } = props; 9686 const [isChecked, setIsChecked] = (0, import_react.useState)(false); 9687 return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_material.Box, { 9688 sx: { 9689 padding: "16px 16px 16px 0", 9690 display: "flex", 9691 flexDirection: "column" 9692 }, 9693 children: [
9694 /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Typography, { 9695 variant: "h3", 9696 color: "secondary.main", 9697 children: "Getty Images terms & conditions" 9698 }), 9699 /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_material.Box, { 9700 sx: { 9701 mt: "11px", 9702 mb: "27px" 9703 }, 9704 children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_material.Typography, { 9705 variant: "body1", 9706 children: [ 9707 "Access and use of the Getty Library of images and videos available through the SundaySky Platform are permitted subject to the\xA0", 9708 /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Link, { 9709 href: "https://help.sundaysky.com/hc/en-us/articles/25401938228637-SundaySky-Third-Party-Terms#Getty-Images", 9710 target: "_blank", 9711 children: "Getty terms" 9712 }), 9713 "." 9714 ] 9715 }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Typography, { 9716 variant: "body1", 9717 children: "Your confirmation below is an agreement by you and the organization responsible for the SundaySky account you are using, to comply with those terms." 9718 })] 9719 }), 9720 /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.FormControlLabel, { 9721 label: "I have reviewed the Getty Terms on behalf of myself and my organization", 9722 sx: { mb: "35px" }, 9723 control: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Checkbox, { 9724 checked: isChecked, 9725 onChange: (event) => setIsChecked(event.target.checked) 9726 }) 9727 }), 9728 /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Button, { 9729 variant: "contained", 9730 size: "medium", 9731 color: "primary", 9732 sx: { alignSelf: "center" }, 9733 disabled: !isChecked, 9734 onClick: onAcceptTermsAndConds, 9735 children: "Accept" 9736 }) 9737 ] 9738 }); 9739}; 9740//#endregion 9741//#region client/components/editor/Components/TruffleEditingWorkSpace/Components/Libraries/Components/TruffleMediaLibrary/StockTab/stockTabUtils.ts 9742var LOADING_ITEMS = [...Array(20).keys()].map((index) => ({ 9743 type: ItemType.STOCK, 9744 id: index.toString(), 9745 name: "", 9746 mediaType: EditorLibraryMediaType.Image, 9747 mediaUrl: "", 9748 thumbnailUrl: "", 9749 largeMediaUrl: "", 9750 largeThumbnailUrl: "", 9751 downloadSizes: [] 9752})); 9753var orientationConversionMap$1 = { 9754 [MediaLibraryFilterMediaOrientation.HORIZONTAL]: GqlClientGettyOrientation.HORIZONTAL, 9755 [MediaLibraryFilterMediaOrientation.VERTICAL]: GqlClientGettyOrientation.VERTICAL, 9756 [MediaLibraryFilterMediaOrientation.ALL]: null, 9757 [MediaLibraryFilterMediaOrientation.SQUARE]: null 9758}; 9759//#endregion 9760//#region client/components/editor/Components/TruffleEditingWorkSpace/Components/Libraries/Components/TruffleMediaLibrary/StockTab/StockTab.tsx 9761init_networkStatus(); 9762var gettyLogo = new URL("data:image/svg+xml,%3csvg%20width='55'%20height='10'%20viewBox='0%200%2055%2010'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cg%20clip-path='url(%23clip0_12225_86657)'%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M23.5791%201.00662H24.25V0.0390625H23.5791V1.00662ZM23.5791%207.97638H24.25V2.25955H23.5791V7.97638Z'%20fill='black'%20fill-opacity='0.38'/%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M25.793%207.97722V2.26039H26.4639V3.12893C27.0567%202.51332%2027.4926%202.15039%2028.3984%202.15039C29.0469%202.15039%2029.6397%202.55722%2029.8073%203.19502C30.3328%202.59039%2030.8919%202.15039%2031.7307%202.15039C32.7482%202.15039%2033.2627%202.70015%2033.2627%203.70063V7.97722H32.5918V3.63478C32.5918%202.99698%2032.2339%202.6782%2031.5853%202.6782C31.071%202.6782%2030.2208%203.21698%2029.8632%203.76649V7.97722H29.1923V3.63478C29.1923%202.99698%2028.8344%202.6782%2028.1859%202.6782C27.6714%202.6782%2026.8217%203.21698%2026.4639%203.76649V7.97722H25.793Z'%20fill='black'%20fill-opacity='0.38'/%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M37.8932%204.74503C35.2319%205.31673%2034.874%205.85551%2034.874%206.58088C34.874%207.20771%2035.31%207.55941%2035.914%207.55941C36.5402%207.55941%2037.3116%207.19673%2037.8932%206.61405V4.74503ZM38.005%207.97722L37.9154%207.28454C37.2221%207.82332%2036.6966%208.08722%2035.8023%208.08722C34.8965%208.08722%2034.2031%207.53746%2034.2031%206.5921C34.2031%205.03088%2035.5%204.74502%2037.9269%204.21722V3.82161C37.9269%203.06307%2037.5915%202.6782%2036.5961%202.6782C35.9028%202.6782%2035.3324%203.0521%2034.9074%203.71161L34.4603%203.44771C34.9633%202.52429%2035.6791%202.15039%2036.6183%202.15039C37.9379%202.15039%2038.5641%202.6782%2038.5641%203.94234V6.93283C38.5641%207.21868%2038.5866%207.59234%2038.6534%207.97722H38.005Z'%20fill='black'%20fill-opacity='0.38'/%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M41.9076%205.56809C42.8468%205.56809%2043.4169%205.12833%2
9762043.4169%204.13882C43.4169%203.13857%2042.8468%202.67662%2041.9076%202.67662C40.9681%202.67662%2040.398%203.24833%2040.398%204.13882C40.398%205.12833%2041.0911%205.56809%2041.9076%205.56809ZM40.1184%208.5254C40.1184%209.08614%2040.6773%209.47077%2041.8851%209.47077C43.3389%209.47077%2043.9651%209.08614%2043.9651%208.49248C43.9651%208.01955%2043.5848%207.55784%2041.8405%207.55784C40.5207%207.55784%2040.1184%208.03077%2040.1184%208.5254ZM44.6026%202.63272C44.3006%202.63272%2043.9092%202.66565%2043.6743%202.89662C43.9314%203.20443%2044.0881%203.54516%2044.0881%204.09492C44.0881%205.50199%2043.0705%206.09589%2041.8405%206.09589C41.4714%206.09589%2041.1918%206.01882%2040.901%205.91979C40.5319%206.05175%2040.3643%206.26053%2040.3643%206.46955C40.3643%206.79931%2040.588%206.96418%2042.1647%206.96418C43.9092%206.96418%2044.636%207.51394%2044.636%208.44833C44.636%209.28394%2043.9873%209.99857%2041.9856%209.99857C39.984%209.99857%2039.4473%209.32784%2039.4473%208.64638C39.4473%208.1515%2039.6485%207.7337%2040.4648%207.43711V7.41492C40.0401%207.32711%2039.6934%207.15126%2039.6934%206.66736C39.6934%206.1837%2040.1408%205.78784%2040.5656%205.70004C40.0401%205.34809%2039.7268%204.79857%2039.7268%204.20492C39.7268%202.9515%2040.6217%202.14882%2042.0305%202.14882C42.5894%202.14882%2043.0144%202.30297%2043.3835%202.54467C43.7192%202.21492%2044.1439%202.03906%2044.6026%202.03906V2.63272Z'%20fill='black'%20fill-opacity='0.38'/%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M48.9874%204.61307C48.8533%203.43673%2048.3278%202.68917%2047.31%202.6782C46.1248%202.66722%2045.6216%203.85454%2045.6103%204.61307H48.9874ZM45.6103%205.14088C45.6103%206.43795%2046.1583%207.55941%2047.4778%207.55941C48.2273%207.55941%2048.5961%207.30649%2049.1775%206.40503L49.7254%206.69088C49.0992%207.70234%2048.5288%208.08722%2047.422%208.08722C45.9011%208.08722%2044.9395%207.13063%2044.9395%205.11893C44.9395%203.34868%2045.8562%202.15039%2047.3324%202.15039C48.9091%202.15039%2049.6586%203.37088%2049.6586%205.14088H45.6103Z'%20fill='black'%20fill-opacity='0.38'/%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M50.62%206.59185C51.1679%207.36137%2051.6602%207.55917%2052.4204%207.55917C53.1584%207.55917%2053.7175%207.08649%2053.7175%206.47088C53.7175%204.81088%2050.2958%205.74527%2050.2958%203.71137C50.2958%202.63405%2051.1567%202.15039%2052.1408%202.15039C53.1137%202.15039%2053.7287%202.52405%2054.1425%203.18381L53.628%203.53551C53.2369%203.00795%2052.8117%202.67795%2052.1186%202.67795C51.4699%202.67795%2050.9667%202.98576%2050.9667%203.67844C50.9667%205.07454%2054.3884%204.25015%2054.3884%206.47088C54.3884%207.49332%2053.427%208.08698%2052.3758%208.08698C51.4809%208.08698%2050.6759%207.73502%2050.1279%206.93259L50.62%206.59185Z'%20fill='black'%20fill-opacity='0.38'/%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M2.40542%203.25645C1.83871%203.25645%201.44325%203.6628%201.44325%204.17597C1.44325%204.68889%201.83871%205.09499%202.40542%205.09499C2.90797%205.09499%203.31416%204.68889%203.31416%204.17597C3.31416%203.6628%202.90797%203.25645%202.40542%203.25645ZM1.21881%208.47255C1.21881%208.90011%201.58206%209.09255%202.69402%209.09255C3.54909%209.09255%203.83794%208.66499%203.83794%208.47255C3.83794%208.21597%203.44248%207.83133%202.15951%207.83133C1.43252%207.83133%201.21881%208.23743%201.21881%208.47255ZM5.08871%203.17084C4.77888%203.17084%204.43661%203.17084%204.2334%203.29938C4.40441%203.5345%204.53298%203.85499%204.53298%204.28255C4.53298%205.33011%203.82721%206.07816%202.43738%206.07816C1.86018%206.07816%201.40032%206.09963%201.40032%206.42036C1.40032%207.31816%205.05675%206.09962%205.05675%208.3228C5.05675%209.11402%204.25486%209.96889%202.48032%209.96889C0.983393%209.96889%200%209.52011%200%208.64353C0%207.94889%200.523777%207.61
9762743%201.00486%207.61743V7.59621C0.748218%207.43597%200.181748%207.2967%200.181748%206.69816C0.181748%206.16377%200.801645%205.75767%201.0478%205.6828C0.587938%205.30865%200.224441%204.88109%200.224441%204.20767C0.224441%203.23523%200.972659%202.27328%202.41616%202.27328C2.88651%202.27328%203.44248%202.46572%203.78451%202.76475C4.04116%202.4228%204.45808%202.25182%205.08871%202.27328V3.17084Z'%20fill='black'%20fill-opacity='0.38'/%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M8.6932%204.47521C8.67198%203.7057%208.26554%203.25668%207.62418%203.25668C6.98257%203.25668%206.57638%203.7057%206.55491%204.47521H8.6932ZM6.55491%205.37326C6.57638%206.52741%207.08967%206.97643%207.70981%206.97643C8.32995%206.97643%208.61831%206.69839%208.94984%206.31375L9.91201%206.91229C9.39897%207.70302%208.65051%208.04521%207.58124%208.04521C6.13799%208.04521%205.22949%206.92302%205.22949%205.15936C5.22949%203.3957%206.13799%202.27351%207.64565%202.27351C9.09963%202.26278%209.91201%203.49204%209.91201%204.8279V5.37326H6.55491Z'%20fill='black'%20fill-opacity='0.38'/%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M18.0342%208.83476C18.2374%208.87769%2018.3977%208.87769%2018.5902%208.87769C19.0498%208.87769%2019.3064%208.74915%2019.4667%208.43939C19.595%208.17208%2019.6806%208.01183%2019.6806%207.7872C19.6806%207.58427%2019.5738%207.34915%2019.5096%207.12452L18.0234%202.37891H19.3601L20.2793%205.79939H20.3008L21.252%202.37891H22.5779L20.8246%207.94769C20.2364%209.54037%2019.7663%209.96793%2018.6758%209.96793C18.3547%209.96793%2018.1945%209.94647%2018.0342%209.925V8.83476Z'%20fill='black'%20fill-opacity='0.38'/%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M11.0028%202.39408V0.683594H12.4609V2.39408H13.6605V3.46311H12.4609V6.60555C12.4609%206.90481%2012.6256%206.99042%2012.9901%206.99042C13.2135%206.99042%2013.4487%206.92628%2013.6605%206.88335V7.97359C13.2606%208.01652%2012.9078%208.0592%2012.508%208.0592C11.426%208.0592%2011.0028%207.5675%2011.0028%206.77652V3.46311H10.1562V2.39408H11.0028Z'%20fill='black'%20fill-opacity='0.38'/%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M14.8172%202.39408V0.683594H16.2754V2.39408H17.4749V3.46311H16.2754V6.60555C16.2754%206.90481%2016.44%206.99042%2016.8045%206.99042C17.028%206.99042%2017.2632%206.92628%2017.4749%206.88335V7.97359C17.0751%208.01652%2016.7223%208.0592%2016.3225%208.0592C15.2405%208.0592%2014.8172%207.5675%2014.8172%206.77652V3.46311H13.9707V2.39408H14.8172Z'%20fill='black'%20fill-opacity='0.38'/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id='clip0_12225_86657'%3e%3crect%20width='54.4737'%20height='10'%20fill='white'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e", "" + import.meta.url).href; 9763var PREVIEW_NO_ASSET_INDEX$1 = -1; 9764var StockTab = (props) => { 9765 const { searchValue, setSearchValue, filterMediaType, filterStockOrientation, filterMinVideoDuration, filterMaxVideoDuration, stockSortOrder, setActiveTab, setCurrentFolderId, setSelectedItemData } = (0, import_react.useContext)(TruffleMediaLibraryContext); 9766 const { rootFolder, foldersByParentFolderId, foldersById, mediaByFolderId } = getMediaFolder(); 9767 const programId = useEditorProgramId(); 9768 const programVersionId = useEditorProgramVersionId(); 9769 const [previewAssetIndex, setPreviewAssetIndex] = (0, import_react.useState)(PREVIEW_NO_ASSET_INDEX$1); 9770 const [assetThreeDotsMenuAnchor, setAssetThreeDotsMenuAnchor] = (0, import_react.useState)(null); 9771 const [assetThreeDotsMenuAssetId, setAssetThreeDotsMenuAssetId] = (0, import_react.useState)(null); 9772 const [selectFolderDialogOpen, setSelectFolderDialogOpen] = (0, import_react.useState)(false); 9773 const { isLoadingUserAcceptedTerms, hasUserAcceptedTerms, acceptUsage } = useEditorUsageAcceptance(GqlClientExternalLibrary.GETTY); 9774 const { loading, data, fetchMore, networkStatus } = useEditorGettyMediaQuery({ 9775 skip: !hasUserAcceptedTerms, 9776 variables: { 9777 includeImages: filterMediaType === MediaLibraryFilterMediaType.ALL || filterMediaType === MediaLibraryFilterMediaType.IMAGES || filterMediaType === MediaLibraryFilterMediaType.IMAGES_AND_ANIMATIONS, 9778 includeVideos: filterMediaType === MediaLibraryFilterMediaType.ALL || filterMediaType === MediaLibraryFilterMediaType.VIDEOS, 9779 searchTerm: searchValue, 9780 orientation: orientationConversionMap$1[filterStockOrientation],
9781 minClipDuration: filterMinVideoDuration, 9782 maxClipDuration: filterMaxVideoDuration, 9783 sortOrder: stockSortOrder, 9784 pageNumber: 0 9785 } 9786 }); 9787 (0, import_react.useEffect)(() => { 9788 if (searchValue !== "" || filterMediaType !== MediaLibraryFilterMediaType.ALL || stockSortOrder !== GqlClientGettySortOrder.BEST_MATCH || filterStockOrientation !== MediaLibraryFilterMediaOrientation.ALL || filterMinVideoDuration !== 0 || filterMaxVideoDuration !== 600) PendoService.getInstance().trackEvent("Media lib search", { 9789 tab: "Stock", 9790 searchValue, 9791 mediaType: filterMediaType.toLowerCase(), 9792 sortOrder: stockSortOrder.toLowerCase(), 9793 orientation: filterStockOrientation.toLowerCase(), 9794 minVideoDuration: filterMinVideoDuration.toString(), 9795 maxVideoDuration: filterMaxVideoDuration.toString() 9796 }); 9797 }, [ 9798 searchValue, 9799 filterMediaType, 9800 stockSortOrder, 9801 filterStockOrientation, 9802 filterMinVideoDuration, 9803 filterMaxVideoDuration 9804 ]); 9805 const totalResultCount = data?.gettySearchMetadata?.resultCount ?? 0; 9806 const assets = (0, import_react.useMemo)(() => loading ? LOADING_ITEMS : (data?.gettySearchMetadata?.assets ?? []).map((asset) => ({ 9807 type: ItemType.STOCK, 9808 id: asset.id, 9809 name: asset.title, 9810 mediaType: asset.__typename === "GettyImageMetadata" ? EditorLibraryMediaType.Image : EditorLibraryMediaType.Video, 9811 mediaUrl: asset.previewUri, 9812 thumbnailUrl: asset.thumbUri, 9813 largeMediaUrl: asset.largePreviewUri, 9814 largeThumbnailUrl: asset.largePreviewPosterUri, 9815 downloadSizes: asset.downloadSizes, 9816 duration: asset.__typename === "GettyVideoMetadata" ? asset.duration : void 0 9817 })), [loading, data?.gettySearchMetadata?.assets]); 9818 const hasNextPreview = previewAssetIndex != PREVIEW_NO_ASSET_INDEX$1 && previewAssetIndex + 1 < assets.length; 9819 const hasPrevPreview = previewAssetIndex != PREVIEW_NO_ASSET_INDEX$1 && previewAssetIndex - 1 >= 0; 9820 const assetThreeDotsMenuAsset = (0, import_react.useMemo)(() => assets.find((asset) => asset.id === assetThreeDotsMenuAssetId), [assets, assetThreeDotsMenuAssetId]); 9821 const loadMore = (0, import_react.useCallback)((startIndex) => { 9822 if (networkStatus === NetworkStatus.fetchMore) return; 9823 fetchMore({ variables: { pageNumber: Math.floor(startIndex / 50) } }); 9824 }, [networkStatus, fetchMore]); 9825 const handleAssetMenuClosed = (0, import_react.useCallback)(() => { 9826 if (!selectFolderDialogOpen) setAssetThreeDotsMenuAssetId(null); 9827 }, [selectFolderDialogOpen, setAssetThreeDotsMenuAssetId]); 9828 const handleClosePreviewDialog = () => { 9829 setPreviewAssetIndex(PREVIEW_NO_ASSET_INDEX$1); 9830 if (assets[previewAssetIndex]) setTimeout(() => { 9831 assetGridEventTarget.scrollToAsset(assets[previewAssetIndex].id); 9832 }, 0); 9833 }; 9834 (0, import_react.useEffect)(() => { 9835 if (assetGridEventTarget) assetGridEventTarget.scrollToTop(); 9836 }, [ 9837 assetGridEventTarget, 9838 searchValue, 9839 filterMediaType, 9840 filterStockOrientation, 9841 filterMinVideoDuration, 9842 filterMaxVideoDuration, 9843 stockSortOrder 9844 ]); 9845 if (isLoadingUserAcceptedTerms) return null; 9846 if (!hasUserAcceptedTerms) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(GettyTermsAndConds, { onAcceptTermsAndConds: acceptUsage }); 9847 const onMoveConfirm = (targetFolderId) => { 9848 handleGettyExternalAssetUpload(programId, programVersionId, assetThreeDotsMenuAsset, targetFolderId, setActiveTab, setCurrentFolderId, setSelectedItemData, props.onMoveComplete, props.showFolderActionsSuccess); 9849 }; 9850 return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [ 9851 /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Container, { children: [ 9852 /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DebouncedSearch, { 9853 sx: { marginRight: "16px" }, 9854 initialValue: searchValue, 9855 placeholder: "Search media", 9856 onChangeCallback: setSearchValue, 9857 numberOfResults: totalResultCount 9858 }), 9859 /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FiltersSection, { 9860 hideMediaTypeFilter: props.hideMediaTypeFilter, 9861 mediaLibraryFilterMediaType: props.mediaLibraryFilterMediaType 9862 }), 9863 assets.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MediaTabNoSearchResult, { searchValue }
9863) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StockAssetGrid, { 9864 ...props, 9865 columnCount: props.columns || 2, 9866 assets, 9867 totalAssetCount: totalResultCount, 9868 loading, 9869 onPreviewAsset: setPreviewAssetIndex, 9870 loadMoreAssets: loadMore, 9871 setAssetThreeDotsMenuAssetId, 9872 setAssetThreeDotsMenuAnchor 9873 }), 9874 /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(PoweredByGettyContainer, { 9875 elevation: 24, 9876 children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Typography, { 9877 color: "text.disabled", 9878 sx: { 9879 fontSize: "10px", 9880 lineHeight: "10px" 9881 }, 9882 children: "Powered by" 9883 }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("img", { 9884 src: gettyLogo, 9885 alt: "Getty Images logo" 9886 })] 9887 }) 9888 ] }), 9889 /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AssetPreviewDialog, { 9890 name: assets[previewAssetIndex]?.id, 9891 url: assets[previewAssetIndex]?.largeMediaUrl || assets[previewAssetIndex]?.mediaUrl, 9892 posterUrl: assets[previewAssetIndex]?.largeThumbnailUrl || assets[previewAssetIndex]?.thumbnailUrl, 9893 isVideo: assets[previewAssetIndex]?.mediaType === EditorLibraryMediaType.Video, 9894 description: assets[previewAssetIndex]?.name, 9895 open: previewAssetIndex != PREVIEW_NO_ASSET_INDEX$1, 9896 onClose: handleClosePreviewDialog, 9897 hasNext: hasNextPreview, 9898 onNext: () => hasNextPreview && setPreviewAssetIndex(previewAssetIndex + 1), 9899 hasPrev: hasPrevPreview, 9900 onPrev: () => hasPrevPreview && setPreviewAssetIndex(previewAssetIndex - 1), 9901 PaperProps: PreviewAssetDialogPaperProps 9902 }), 9903 assetThreeDotsMenuAsset && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AssetThreeDotsMenu, { 9904 asset: assetThreeDotsMenuAsset, 9905 anchor: assetThreeDotsMenuAnchor, 9906 closeMenu: () => setAssetThreeDotsMenuAnchor(null), 9907 onMenuClosed: handleAssetMenuClosed, 9908 openSelectFolderDialog: () => setSelectFolderDialogOpen(true), 9909 onMoveComplete: props.onMoveComplete, 9910 showFolderActionsSuccess: props.showFolderActionsSuccess 9911 }), 9912 assetThreeDotsMenuAsset && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MoveToFolderDialog, { 9913 open: selectFolderDialogOpen, 9914 onClose: () => setSelectFolderDialogOpen(false), 9915 itemsToMoveDetails: [{ 9916 isFolder: false, 9917 id: assetThreeDotsMenuAsset.id, 9918 name: assetThreeDotsMenuAsset.name, 9919 typeDetails: { 9920 capitalizedTypeName: "Asset", 9921 article: "An" 9922 } 9923 }], 9924 action: MoveToFolderDialogActions.ADD,
9925 rootFolderName: "Your Media", 9926 foldersById, 9927 foldersByParentFolderId, 9928 initialFolderId: rootFolder?.id, 9929 onCreateNewFolder: createEditorAssetFolder, 9930 getFolderNameErrorMessage: validateEditedFolderName, 9931 onMoveConfirm, 9932 itemsByParentFolderId: mediaByFolderId, 9933 trackingIdentifier: "media-lib" 9934 }) 9935 ] }); 9936}; 9937var Container = (0, import_material.styled)(import_material.Box)({ 9938 position: "relative", 9939 width: "100%", 9940 display: "flex", 9941 flexDirection: "column", 9942 gap: "16px", 9943 height: "100%", 9944 minHeight: 0 9945}); 9946var PoweredByGettyContainer = (0, import_material.styled)(import_material.Paper)({ 9947 position: "absolute", 9948 bottom: 0, 9949 right: "22px", 9950 borderRadius: "4px 4px 0px 0px", 9951 display: "flex", 9952 alignItems: "center", 9953 padding: "8px 4px", 9954 gap: "4px" 9955}); 9956//#endregion 9957//#region client/components/newNav/hooks/UseAiMediaGenBlockState/useAiMediaGenBlockState.tsx 9958var useAiMediaGenBlockState = () => { 9959 const { accountFeatureFullData } = useAccountFeatureFullData(); 9960 const isAiImageBlocked = isAiFeatureBlocked(accountFeatureFullData, GqlClientFeatureTypeDefinition.USER_BLOCK_AI_IMAGE_GENERATION); 9961 const isGenerateVideoWithAiEnabled = isFeatureEnabled(featureFlagConst._EDITOR_GENERATE_VIDEO_WITH_AI); 9962 const isAiVideoBlocked = isAiFeatureBlocked(accountFeatureFullData, GqlClientFeatureTypeDefinition.USER_BLOCK_AI_VIDEO_GENERATION); 9963 if (isGenerateVideoWithAiEnabled) { 9964 if (isAiImageBlocked && isAiVideoBlocked) return { 9965 isBlocked: true, 9966 tooltipMessage: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [ 9967 "AI Media Generators are disabled.",
9968 /* @__PURE__ */ (0, import_jsx_runtime.jsx)("br", {}), 9969 "To enable this feature, contact your account owner." 9970 ] }) 9971 }; 9972 return { 9973 isBlocked: false, 9974 tooltipMessage: "" 9975 }; 9976 } 9977 if (isAiImageBlocked) return { 9978 isBlocked: true, 9979 tooltipMessage: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [ 9980 "AI Image Generator is disabled.", 9981 /* @__PURE__ */ (0, import_jsx_runtime.jsx)("br", {}), 9982 "Ask your account owner to enable this feature." 9983 ] }) 9984 }; 9985 return { 9986 isBlocked: false, 9987 tooltipMessage: "" 9988 }; 9989}; 9990//#endregion 9991//#region client/components/editor/Hooks/UseEditorPermissions/useEditorPermissions.ts 9992var useEditorPermissions = () => { 9993 const editorPermissions = useReactiveVar(localEditorPermissionsVar); 9994 if (!useReactiveVar(localEditorIsInReviewVar)) return editorPermissions; 9995 return { 9996 ...editorPermissions, 9997 canCreateEditorProgram: false, 9998 canEditEditorProgram: false, 9999 canOnlyViewProgram: true, 10000 canEditViewerProfiles: false, 10001 canGenerateVideoLinks: false, 10002 canGenerateVideoLinksProd: false, 10003 canEditLandingPageBuilderApiGateway: false, 10004 canEditVideo: false, 10005 canUpdateCustomConnector: false 10006 }; 10007}; 10008//#endregion 10009//#region client/components/editor/Hooks/UseAiGenerationDialogOpen/useAiGenerationDialogOpen.ts 10010var useSetAiGenerationDialogInfo = () => { 10011 const { isBlocked } = useAiMediaGenBlockState(); 10012 const { canEditEditorProgram } = useEditorPermissions(); 10013 return (0, import_react.useCallback)((info) => { 10014 if ((isBlocked || !canEditEditorProgram) && info?.isDialogOpen) return; 10015 localAiMediaGenerationDialogInfo(info); 10016 }, [isBlocked, canEditEditorProgram]); 10017}; 10018var useAiGenerationDialogOpen = () => { 10019 return useReactiveVar(localAiMediaGenerationDialogInfo); 10020}; 10021//#endregion 10022//#region client/components/editor/Components/TruffleEditingWorkSpace/Components/LivePreview/Components/AiMediaGenerationDialog/aiMediaGenerationTypes.ts 10023var OperationType = /* @__PURE__ */ function(OperationType) { 10024 OperationType["GENERATE"] = "generate"; 10025 OperationType["CONVERT"] = "convert"; 10026 OperationType["EDIT"] = "edit"; 10027 return OperationType; 10028}({}); 10029var AiMediaGenerationMode = /* @__PURE__ */ function(AiMediaGenerationMode) { 10030 AiMediaGenerationMode["IMAGE"] = "image"; 10031 AiMediaGenerationMode["VIDEO"] = "video"; 10032 return AiMediaGenerationMode; 10033}({}); 10034var FinalStep = /* @__PURE__ */ function(FinalStep) { 10035 FinalStep["NO_USE"] = "no use"; 10036 FinalStep["USE_BTN"] = "use button"; 10037 FinalStep["DOUBLE_CLICK"] = "use by double click"; 10038 return FinalStep; 10039}({}); 10040var PreviewTrigger = /* @__PURE__ */ function(PreviewTrigger) { 10041 PreviewTrigger["DOUBLE_CLICK"] = "double-click"; 10042 PreviewTrigger["BUTTON"] = "button"; 10043 return PreviewTrigger; 10044}({}); 10045var AiVideoGenerationStep = /* @__PURE__ */ function(AiVideoGenerationStep) { 10046 AiVideoGenerationStep["GENERATE_IMAGE"] = "generate_image"; 10047 AiVideoGenerationStep["CONFIGURE_VIDEO"] = "configure_video"; 10048 AiVideoGenerationStep["GENERATE_VIDEO"] = "generate_video"; 10049 return AiVideoGenerationStep; 10050}({}); 10051var VideoDurationEnum = /* @__PURE__ */ function(VideoDurationEnum) { 10052 VideoDurationEnum["FOUR_SEC"] = "4 Sec"; 10053 VideoDurationEnum["SIX_SEC"] = "6 Sec"; 10054 VideoDurationEnum["EIGHT_SEC"] = "8 Sec"; 10055 return VideoDurationEnum; 10056}({}); 10057var getVideoDurationSeconds = (selectedDuration) => { 10058 switch (selectedDuration) { 10059 case "4 Sec": return 4; 10060 case "8 Sec": return 8; 10061 default: return 6; 10062 } 10063}; 10064//#endregion 10065//#region client/components/editor/Hooks/UseAssetLibrary/useAcquiaDamSubCategories.ts 10066var useAcquiaDamSubCategories = (path) => { 10067 const { data, loading, refetch, error } = useAcquiaDamSubCategoriesQuery({ variables: { path } }); 10068 return { 10069 loadingCategories: loading, 10070 currentCategory: data?.acquiaCategory, 10071 subCategories: data?.acquiaCategory?.subCategories || [], 10072 reFetchSubCategories: refetch, 10073 subCategoriesError: !!error 10074 }; 10075}; 10076//#endregion 10077//#region client/components/editor/Components/TruffleEditingWorkSpace/Components/Libraries/Components/TruffleMediaLibrary/AssetGrid/DamFolderCard.tsx 10078var folderIcon = new URL("data:image/svg+xml,%3csvg%20width='46'%20height='35'%20viewBox='0%200%2046%2035'%2
100780fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cg%20id='Folder%20icon'%3e%3cpath%20id='Subtract'%20d='M21.0625%2012.5312C21.0625%2014.166%2019.7305%2015.4375%2018.1562%2015.4375H12.3438C10.709%2015.4375%209.4375%2014.166%209.4375%2012.5312V6.71875C9.4375%205.14453%2010.709%203.8125%2012.3438%203.8125H18.1562C19.7305%203.8125%2021.0625%205.14453%2021.0625%206.71875V12.5312ZM21.0625%2028.0312C21.0625%2029.666%2019.7305%2030.9375%2018.1562%2030.9375H12.3438C10.709%2030.9375%209.4375%2029.666%209.4375%2028.0312V22.2188C9.4375%2020.6445%2010.709%2019.3125%2012.3438%2019.3125H18.1562C19.7305%2019.3125%2021.0625%2020.6445%2021.0625%2022.2188V28.0312ZM24.9375%206.71875C24.9375%205.14453%2026.209%203.8125%2027.8438%203.8125H33.6562C35.2305%203.8125%2036.5625%205.14453%2036.5625%206.71875V12.5312C36.5625%2014.166%2035.2305%2015.4375%2033.6562%2015.4375H27.8438C26.209%2015.4375%2024.9375%2014.166%2024.9375%2012.5312V6.71875ZM36.5625%2028.0312C36.5625%2029.666%2035.2305%2030.9375%2033.6562%2030.9375H27.8438C26.209%2030.9375%2024.9375%2029.666%2024.9375%2028.0312V22.2188C24.9375%2020.6445%2026.209%2019.3125%2027.8438%2019.3125H33.6562C35.2305%2019.3125%2036.5625%2020.6445%2036.5625%2022.2188V28.0312Z'%20fill='%230053E5'%20fill-opacity='0.2'/%3e%3c/g%3e%3c/svg%3e", "" + import.meta.url).href; 10079var DamFolderCard = (props) => { 10080 function handleDoubleClick(event) { 10081 if (props.onNavigate) { 10082 props.onNavigate(); 10083 event.stopPropagation(); 10084 event.preventDefault(); 10085 } 10086 } 10087 const icon = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FolderIcon, { 10088 alt: "Folder icon", 10089 src: folderIcon 10090 }); 10091 return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Tooltip, { 10092 title: props.folder.name, 10093 arrow: true, 10094 placement: "top", 10095 children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Box, { 10096 sx: (0, import_dist$3.combineSxProps)(cardSxProps, FolderContainerSxProps), 10097 onClick: props.onClick, 10098 "aria-selected": props.selected, 10099 children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_material.ButtonBase, { 10100 sx: FolderButtonContainerSxProps, 10101 onDoubleClick: handleDoubleClick, 10102 disableRipple: true, 10103 children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Thumbnail, { children: icon }
10103), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Box, { 10104 sx: { 10105 width: "100%", 10106 alignSelf: "flex-start" 10107 }, 10108 children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Typography, { 10109 variant: "body2", 10110 sx: FolderNameSxProps(), 10111 children: props.folder.name 10112 }) 10113 })] 10114 }) 10115 }) 10116 }) }); 10117}; 10118//#endregion 10119//#region client/components/editor/Components/TruffleEditingWorkSpace/Components/Libraries/Components/TruffleMediaLibrary/AssetGrid/DamAssetGrid.tsx 10120var SUPPORTED_FORMATS_TEXT = "Supported formats:\nImage: JPG, PNG, GIF\nVideo: MOV, FLV, MP4, WebM"; 10121var DamAssetGrid = (props) => { 10122 return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AssetGrid, { 10123 items: (0, import_react.useMemo)(() => { 10124 const folders = props.folders.map((folder) => ({ 10125 ...folder, 10126 enableDragDrop: false, 10127 onItemClick: props.enableDragDrop === false ? props.onItemClick : void 0, 10128 onNavigateItem: props.onNavigateItem 10129 })); 10130 const assets = props.assets.map((asset) => ({ 10131 ...asset, 10132 enableDragDrop: props.enableDragDrop, 10133 onItemClick: props.enableDragDrop === false ? props.onItemClick : void 0, 10134 onPreviewAsset: props.onPreviewAsset, 10135 setAssetThreeDotsMenuAssetId: props.setAssetThreeDotsMenuAssetId, 10136 setAssetThreeDotsMenuAnchor: props.setAssetThreeDotsMenuAnchor 10137 })); 10138 return [ 10139 ...folders, 10140 ...assets, 10141 { 10142 id: "supported-formats", 10143 type: "text", 10144 text: SUPPORTED_FORMATS_TEXT, 10145 columnCount: props.columnCount, 10146 itemCount: folders.length + assets.length + 1 10147 } 10148 ]; 10149 }, [ 10150 props.assets, 10151 props.folders, 10152 props.enableDragDrop, 10153 props.onPreviewAsset, 10154 props.enableDragDrop === false ? props.onItemClick : void 0, 10155 props.setAssetThreeDotsMenuAssetId, 10156 props.setAssetThreeDotsMenuAnchor 10157 ]), 10158 totalItemCount: props.totalAssetCount, 10159 RenderItem: GridItemRenderer, 10160 columnCount: props.columnCount, 10161 loadMoreItems: props.loadMoreAssets, 10162 rowGap: 16, 10163 itemWidth: 158, 10164 itemHeight: 115, 10165 activeLibraryView: GqlClientLibraryViewType.GRID 10166 }); 10167}; 10168var GridItemRenderer = ({ index, data }) => { 10169 const [grabbed, setGrabbed] = (0, import_react.useState)(false); 10170 const { selectedItemData } = (0, import_react.useContext)(TruffleMediaLibraryContext); 10171 if (data.type === "text") return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Box, { 10172 sx: TextItemWrapperSxProps, 10173 style: getCenteredGridItemStyle(data.itemCount, data.columnCount), 10174 children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Typography, { 10175 variant: "body1", 10176 textAlign: "center", 10177 color: "text.primary", 10178 style: { 10179 width: 158 * data.columnCount + 16 * (data.columnCount - 1), 10180 whiteSpace: "pre-line" 10181 }, 10182 children: data.text 10183 }) 10184 }); 10185 return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(DraggableGridItem, { 10186 itemWidth: 158, 10187 itemHeight: 115, 10188 draggable: data.enableDragDrop, 10189 "aria-grabbed": grabbed, 10190 onDragStart: (e) => { 10191 if (data.enableDragDrop) { 10192 handleDragStart(e, data); 10193 setGrabbed(true); 10194 } 10195 }, 10196 onDragEnd: () => { 10197 if (data.enableDragDrop) { 10198 handleDragEnd(); 10199 setGrabbed(false); 10200 } 10201 }, 10202 children: [data.type === ItemType.DAM_ASSET && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AssetCard, { 10203 asset: data, 10204 loading: false, 10205 onPreview: () => data.onPreviewAsset(index), 10206 selected: selectedItemData?.id === data.id, 10207 onClick: data.enableDragDrop === false ? (() => data.onItemClick(data)) : void 0, 10208 enableDragDrop: data.enableDragDrop, 10209 setThreeDotsMenuAssetId: data.setAssetThreeDotsMenuAssetId, 10210 setThreeDotsMenuAnchor: data.setAssetThreeDotsMenuAnchor, 10211 activeLibraryView: GqlClientLibraryViewType.GRID 10212 }), data.type === ItemType.DAM_FOLDER && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DamFolderCard, { 10213 folder: data, 10214 selected: selectedItemData?.id === data.id, 10215 onClick: () => data.onItemClick(data), 10216 onNavigate: () => data.onNavigateItem(data.path) 10217 })] 10218 }); 10219}; 10220//#endregion 10221//#region client/components/editor/Hooks/UseAssetLibrary/useAcquiaDamAssets.ts 10222var sortByConversionMap = { 10223 [MediaLibrarySortBy.A_Z]: GqlClientAcquiaAssetSortBy.A_Z, 10224 [MediaLibrarySortBy.LAST_ADDED]: GqlClientAcquiaAssetSortBy.LAST_ADDED 10225}; 10226var getSortDirectionConversionMap = (sortBy, sortDirection) => { 10227 if (sortBy === MediaLibrarySortBy.LAST_ADDED) return GqlClientAcquiaAssetSortDirection[sortDirection === MediaLibrarySortDirection.TOP_TO_BOTTOM ? "DESC" : "ASC"]; 10228 return GqlClientAcquiaAssetSortDirection[sortDirection === MediaLibrarySortDirection.TOP_TO_BOTTOM ? "ASC" : "DESC"]; 10229}; 10230var orientationConversionMap = { 10231 [MediaLibraryFilterMediaOrientation.ALL]: null, 10232 [MediaLibraryFilterMediaOrientation.HORIZONTAL]: GqlClientAcquiaAssetOrientation.HORIZONTAL, 10233 [MediaLibraryFilterMediaOrientation.VERTICAL]: GqlClientAcquiaAssetOrientation.VERTICAL, 10234 [MediaLibraryFilterMediaOrientation.SQUARE]: GqlClientAcquiaAssetOrientation.SQUARE 10235}; 10236var mediaTypeConversionMap = { 10237 [MediaLibraryFilterMediaType.ALL]: null, 10238 [MediaLibraryFilterMediaType.IMAGES_AND_ANIMATIONS]: null, 10239 [MediaLibraryFilterMediaType.IMAGES]: GqlClientAcquiaAssetMediaType.IMAGES, 10240 [MediaLibraryFilterMediaType.VIDEOS]: GqlClientAcquiaAssetMediaType.VIDEOS 10241}; 10242var useAcquiaDamMediaAssets = ({ categoryPath, searchTerm, pageNumber, sortBy, sortDirection, filterStockOrientation, filterMediaType }) => { 10243 const { data, loading, refetch, error, fetchMore, networkStatus } = useAcquiaDamAssetsQuery({ variables: { 10244 categoryPath, 10245 searchTerm, 10246 pageNumber, 10247 sortBy: sortByConversionMap[sortBy], 10248 sortDirection: getSortDirectionConversionMap(sortBy, sortDirection), 10249 orientation: orientationConversionMap[filterStockOrientation], 10250 mediaType: mediaTypeConversionMap[filterMediaType] 10251 } }); 10252 return { 10253 loadingAssets: loading, 10254 mediaAssets: data?.acquiaAssets?.assets || [], 10255 resultsCount: data?.acquiaAssets?.resultCount, 10256 reFetchAssets: refetch, 10257 assetsError: !!error, 10258 fetchMore, 10259 networkStatus 10260 }; 10261}; 10262//#endregion 10263//#region client/components/editor/Components/TruffleEditingWorkSpace/Components/Libraries/Components/TruffleMediaLibrary/DamTab/AcquiaThreeDotsMenu.tsx 10264var AcquiaThreeDotsMenu = () => { 10265 const [menuAnchorEl, setMenuAnchorEl] = (0, import_react.useState)(null); 10266 const [isConfirmationDialogOpen, setIsConfirmationDialogOpen] = (0, import_react.useState)(false); 10267 const [removeServiceFromAccount, { loading }] = useRemoveServiceFromAccountMutation(); 10268 const handleRemoveFromAccount = async () => { 10269 await removeServiceFromAccount({ variables: { removeServiceFromAccount: { serviceType: GqlClientServiceType.ACQUIA } } }); 10270 PendoService.getInstance().trackEvent("DAM integration removed", { DAMtype: "Acquia" }); 10271 setSuccessNotification({ message: "Acquia DAM removed" }); 10272 setIsConfirmationDialogOpen(false); 10273 }; 10274 return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
10275 /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Tooltip, { 10276 title: "Options", 10277 children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.IconButton, { 10278 "data-tracking-id": "tracking-id-media-lib-acquia-3-dots-btn", 10279 onClick: (e) => setMenuAnchorEl(e.currentTarget), 10280 children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FontAwesomeIcon, { icon: import_faEllipsisVertical.faEllipsisVertical }) 10281 }) 10282 }), 10283 /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Menu, { 10284 open: !!menuAnchorEl, 10285 slotProps: { paper: { sx: { width: "220px" } } }, 10286 anchorEl: menuAnchorEl, 10287 onClose: () => setMenuAnchorEl(null), 10288 anchorOrigin: { 10289 vertical: "top", 10290 horizontal: "right" 10291 }, 10292 transformOrigin: { 10293 vertical: -7, 10294 horizontal: 0 10295 }, 10296 autoFocus: false, 10297 children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_material.MenuItem, { 10298 dense: true, 10299 "data-tracking-id": "tracking-id-media-lib-acquia-3-dots-remove-from-account", 10300 onClick: () => { 10301 setIsConfirmationDialogOpen(true); 10302 setMenuAnchorEl(null); 10303 }, 10304 children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.ListItemIcon, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FontAwesomeIcon, { icon: import_faTrashAlt.faTrashAlt }) }
10304), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.ListItemText, { primary: "Remove from account" })] 10305 }) 10306 }), 10307 /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dist$3.ConfirmationDialog, { 10308 open: isConfirmationDialogOpen, 10309 dialogTitle: "Remove Acquia DAM?", 10310 primaryActionButtonText: "Remove", 10311 PrimaryActionButtonProps: { 10312 loading, 10313 "data-tracking-id": "tracking-id-media-lib-acquia-3-dots-remove-from-account-confirmation-remove-btn", 10314 color: "error", 10315 startIcon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FontAwesomeIcon, { icon: import_faTrashAlt.faTrashAlt }), 10316 onClick: handleRemoveFromAccount 10317 }, 10318 secondaryActionButtonText: "Cancel", 10319 SecondaryActionButtonProps: { 10320 "data-tracking-id": "tracking-id-media-lib-acquia-3-dots-remove-from-account-confirmation-cancel-btn", 10321 onClick: () => setIsConfirmationDialogOpen(false) 10322 }, 10323 children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_material.Typography, { 10324 variant: "body1", 10325 children: [ 10326 "This", 10327 /* @__PURE__ */ (0, import_jsx_runtime.jsx)("strong", { children: " will not " }), 10328 "affect any media assets used in this video or imported into Your Media, even if they came from the Acquia DAM." 10329 ] 10330 }) 10331 }) 10332 ] }); 10333}; 10334//#endregion 10335//#region client/components/editor/Components/TruffleEditingWorkSpace/Components/Libraries/Components/TruffleMediaLibrary/ActionBar/ActionBar.tsx 10336var ActionBar = ({ backButtonProps, newFolderButtonProps, changeViewButtonProps, trackingIdPrefix, additionalActionButton }) => { 10337 return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_material.Box, { 10338 sx: containerSxProps$3, 10339 "data-testid": "truffle-media-library-action-bar", 10340 children: [ 10341 backButtonProps ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Box, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Tooltip, { 10342 placement: "top", 10343 title: "Back", 10344 arrow: true, 10345 children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.IconButton, { 10346 "data-tracking-id": `${trackingIdPrefix}-folder-nav-back-btn`, 10347 sx: backButtonSxProps, 10348 color: "primary", 10349 onClick: backButtonProps.onClick, 10350 children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FontAwesomeIcon, { icon: import_faArrowLeft.faArrowLeft }) 10351 }) 10352 }) }) : null,
10353 backButtonProps && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Typography, { 10354 sx: folderNameSxProps, 10355 variant: "body2", 10356 children: backButtonProps.folderName 10357 }), 10358 newFolderButtonProps ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Box, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Tooltip, { 10359 placement: "top", 10360 title: "New folder", 10361 arrow: true, 10362 children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.IconButton, { 10363 sx: newFolderButtonSxProps, 10364 color: "primary", 10365 onClick: newFolderButtonProps.onClick, 10366 "data-tracking-id": `${trackingIdPrefix}-new-folder-button`, 10367 children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FontAwesomeIcon, { icon: import_faFolderPlus.faFolderPlus }) 10368 }) 10369 }) }) : null, 10370 changeViewButtonProps ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Box, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Tooltip, { 10371 placement: "top", 10372 title: changeViewButtonProps.activeLibraryView === GqlClientLibraryViewType.GRID ? "List view" : "Grid view", 10373 arrow: true, 10374 children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.IconButton, { 10375 sx: newFolderButtonSxProps, 10376 color: "primary", 10377 onClick: changeViewButtonProps.onClick, 10378 "data-tracking-id": changeViewButtonProps.activeLibraryView === GqlClientLibraryViewType.GRID ? `${trackingIdPrefix}-list-view-btn` : `${trackingIdPrefix}-grid-view-btn`, 10379 children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FontAwesomeIcon, { icon: changeViewButtonProps.activeLibraryView === GqlClientLibraryViewType.GRID ? import_faBars.faBars : import_faGripHorizontal.faGripHorizontal }) 10380 }) 10381 }) }) : null, 10382 additionalActionButton 10383 ] 10384 }); 10385}; 10386var containerSxProps$3 = { 10387 minHeight: "32px", 10388 display: "flex", 10389 flexDirection: "row", 10390 alignItems: "center", 10391 justifyContent: "end", 10392 gap: "4px", 10393 marginRight: "16px" 10394}; 10395var backButtonSxProps = { 10396 width: "32px", 10397 height: "32px", 10398 marginRight: "10px", 10399 "& svg": { 10400 width: "16px", 10401 height: "16px" 10402 }, 10403 "&:not([disabled]):not(:hover)": { color: "action.active" } 10404}; 10405var folderNameSxProps = { 10406 flexGrow: 1, 10407 color: "text.primary", 10408 overflow: "hidden", 10409 textOverflow: "ellipsis", 10410 whiteSpace: "nowrap" 10411}; 10412//#endregion 10413//#region client/components/editor/Components/TruffleEditingWorkSpace/Components/Libraries/Components/TruffleMediaLibrary/DamTab/ErrorDamTab.tsx 10414var errorIcon = new URL("/client/images/AI_error_optimized.CaexZHnL.png", "" + import.meta.url).href; 10415var SUPPORT_URL = "https://help.sundaysky.com/hc/en-us/requests/new"; 10416var ErrorDamTab = ({ handleTryAgain }) => { 10417 return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_material.Box, { 10418 sx: containerSxProps$2, 10419 children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(ActionBar, { 10420 trackingIdPrefix: "tracking-id-dam-tab", 10421 additionalActionButton: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AcquiaThreeDotsMenu, {}) 10422 }), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_material.Box, { 10423 sx: imageSxProps, 10424 children: [
10425 /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Icon, { 10426 component: "img", 10427 src: errorIcon, 10428 sx: { 10429 width: "244px", 10430 height: "auto" 10431 } 10432 }), 10433 /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Typography, { 10434 variant: "h3", 10435 fontWeight: "400", 10436 children: "Connection failed" 10437 }), 10438 /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Button, { 10439 onClick: handleTryAgain, 10440 color: "primary", 10441 variant: "contained", 10442 children: "Try again" 10443 }), 10444 /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Button, { 10445 color: "primary", 10446 onClick: () => window.open(SUPPORT_URL, "_blank"), 10447 children: "SundaySky Support" 10448 }) 10449 ] 10450 })] 10451 }); 10452}; 10453var containerSxProps$2 = { 10454 width: "100%", 10455 height: "100%", 10456 display: "flex", 10457 flexDirection: "column" 10458}; 10459var imageSxProps = { 10460 height: "100%", 10461 flexDirection: "column", 10462 display: "flex", 10463 justifyContent: "center", 10464 alignItems: "center", 10465 gap: "16px" 10466}; 10467//#endregion 10468//#region client/components/editor/Components/TruffleEditingWorkSpace/Components/Libraries/Components/TruffleMediaLibrary/DamTab/damTabUtils.ts 10469var FOLDER_LOADING_ITEMS = [...Array(10).keys()].map((index) => ({ 10470 type: ItemType.DAM_FOLDER, 10471 id: "folder" + index.toString(), 10472 name: "", 10473 path: "" 10474})); 10475var ASSET_LOADING_ITEMS = [...Array(10).keys()].map((index) => ({ 10476 type: ItemType.DAM_ASSET, 10477 externalLibrary: GqlClientExternalLibrary.ACQUIA, 10478 id: "asset" + index.toString(), 10479 name: "", 10480 mediaType: EditorLibraryMediaType.Image, 10481 mediaUrl: "", 10482 thumbnailUrl: "", 10483 largeThumbnailUrl: "", 10484 downloadUrl: "", 10485 resolution: { 10486 width: 0, 10487 height: 0 10488 }, 10489 size: 0, 10490 createdAt: /* @__PURE__ */ new Date(), 10491 updatedAt: /* @__PURE__ */ new Date(), 10492 format: "" 10493})); 10494var filterDamFolder = (category, searchTerm) => { 10495 return category.name.toLowerCase().includes(searchTerm.toLowerCase()); 10496}; 10497var sortDamFolder = (sortBy, sortDirection, { name: first }, { name: second }) => { 10498 if (sortBy === MediaLibrarySortBy.LAST_ADDED) return 0; 10499 if (sortDirection === MediaLibrarySortDirection.TOP_TO_BOTTOM) return first.toLowerCase() < second.toLowerCase() ? -1 : 1; 10500 return first.toLowerCase() > second.toLowerCase() ? -1 : 1; 10501}; 10502var convertToDamFolder = (category) => { 10503 return { 10504 type: ItemType.DAM_FOLDER, 10505 id: category.id, 10506 name: category.name, 10507 path: category.path, 10508 parentPath: category.parentCategoryPath 10509 }; 10510}; 10511var convertToDamAsset = (asset) => { 10512 return { 10513 type: ItemType.DAM_ASSET, 10514 externalLibrary: GqlClientExternalLibrary.ACQUIA, 10515 id: asset.id, 10516 name: removeFileExtension(asset.name), 10517 mediaType: asset.type === GqlClientAcquiaAssetType.IMAGE ? EditorLibraryMediaType.Image : EditorLibraryMediaType.Video, 10518 mediaUrl: asset.mediaUrl, 10519 thumbnailUrl: asset.thumbnailUri, 10520 largeThumbnailUrl: asset.largeThumbnailUrl, 10521 downloadUrl: asset.downloadUri, 10522 resolution: { 10523 width: asset.mediaMetadata.width, 10524 height: asset.mediaMetadata.height 10525 }, 10526 size: asset.mediaMetadata.sizeInKb * 1024, 10527 createdAt: new Date(asset.created), 10528 updatedAt: new Date(asset.updated), 10529 duration: asset.mediaMetadata.duration, 10530 format: asset.mediaMetadata.format 10531 }; 10532}; 10533//#endregion 10534//#region client/components/editor/Components/TruffleEditingWorkSpace/Components/Libraries/Components/TruffleMediaLibrary/DamTab/DamTabNoResult/EmptyContent.tsx 10535var EmptyContent = ({ title, description }) => { 10536 return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_material.Box, { 10537 sx: containerSxProps$1, 10538 children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Typography, { 10539 variant: "h3", 10540 children: title 10541 }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Typography, { 10542 sx: descriptionSxProps, 10543 variant: "body1", 10544 color: "text.primary", 10545 children: description 10546 })] 10547 }); 10548}; 10549var containerSxProps$1 = { 10550 display: "flex", 10551 flexDirection: "column", 10552 alignItems: "center", 10553 justifyContent: "center", 10554 gap: "16px", 10555 height: "100%" 10556}; 10557var descriptionSxProps = { 10558 width: "320px", 10559 textAlign: "center", 10560 color: (theme) => theme.palette.text.secondary 10561}; 10562//#endregion 10563//#region client/components/editor/Components/TruffleEditingWorkSpace/Components/Libraries/Components/TruffleMediaLibrary/DamTab/DamTabNoResult/DamTabNoResult.tsx 10564var DamTabNoResult = ({ searchValue, isTopLevelCategoryPath }) => {
10565 return searchValue ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MediaTabNoSearchResult, { searchValue }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(EmptyContent, { 10566 title: isTopLevelCategoryPath ? "Acquia DAM is empty" : "Category is empty", 10567 description: "Displaying supported media assets.\nUnsupported files will not be shown." 10568 }); 10569}; 10570//#endregion 10571//#region client/components/editor/Components/TruffleEditingWorkSpace/Components/Libraries/Components/TruffleMediaLibrary/DamTab/DamTab.tsx 10572init_networkStatus(); 10573var TOP_LEVEL_CATEGORY_PATH = ""; 10574var PREVIEW_NO_ASSET_INDEX = -1; 10575var DamTab = (props) => { 10576 const { setActiveTab, setCurrentFolderId } = (0, import_react.useContext)(TruffleMediaLibraryContext); 10577 const { sortDirection, sortBy, filterMediaType, filterStockOrientation, searchValue, setSearchValue } = (0, import_react.useContext)(TruffleMediaLibraryContext); 10578 const [categoryPath, setCategoryPath] = (0, import_react.useState)(TOP_LEVEL_CATEGORY_PATH); 10579 const [previewAssetIndex, setPreviewAssetIndex] = (0, import_react.useState)(PREVIEW_NO_ASSET_INDEX); 10580 const [assetThreeDotsMenuAssetId, setAssetThreeDotsMenuAssetId] = (0, import_react.useState)(null); 10581 const [assetThreeDotsMenuAnchor, setAssetThreeDotsMenuAnchor] = (0, import_react.useState)(null); 10582 const [selectFolderDialogOpen, setSelectFolderDialogOpen] = (0, import_react.useState)(false); 10583 const { rootFolder, foldersByParentFolderId, foldersById, mediaByFolderId } = getMediaFolder(); 10584 const searchTerm = searchValue.trim() ? searchValue : ""; 10585 const { loadingAssets, mediaAssets, resultsCount, assetsError, reFetchAssets, fetchMore, networkStatus } = useAcquiaDamMediaAssets({ 10586 sortBy, 10587 sortDirection, 10588 filterMediaType, 10589 filterStockOrientation, 10590 pageNumber: 0, 10591 categoryPath, 10592 searchTerm 10593 }); 10594 const { loadingCategories, currentCategory, subCategories, subCategoriesError, reFetchSubCategories } = useAcquiaDamSubCategories(categoryPath); 10595 const loading = loadingAssets || loadingCategories; 10596 const error = assetsError || subCategoriesError; 10597 const isTopLevel = categoryPath === TOP_LEVEL_CATEGORY_PATH; 10598 (0, import_react.useEffect)(() => { 10599 if (searchTerm !== "" || filterMediaType !== MediaLibraryFilterMediaType.ALL || filterStockOrientation !== MediaLibraryFilterMediaOrientation.ALL || sortBy !== MediaLibrarySortBy.LAST_ADDED || sortDirection !== MediaLibrarySortDirection.TOP_TO_BOTTOM) PendoService.getInstance().trackEvent("Media lib search", { 10600 tab: "Acquia", 10601 searchTerm, 10602 mediaType: filterMediaType.toLowerCase(), 10603 orientation: filterStockOrientation.toLowerCase(), 10604 sortBy: sortBy.toLowerCase(), 10605 sortDirection: sortDirection.toLowerCase() 10606 }); 10607 }, [ 10608 searchTerm, 10609 filterMediaType, 10610 filterStockOrientation, 10611 sortBy, 10612 sortDirection 10613 ]); 10614 const folders = (0, import_react.useMemo)(() => loading ? FOLDER_LOADING_ITEMS : subCategories.filter((category) => filterDamFolder(category, searchTerm)).sort((first, second) => sortDamFolder(sortBy, sortDirection, first, second)).map(convertToDamFolder), [ 10615 subCategories, 10616 loading, 10617 searchTerm, 10618 sortBy, 10619 sortDirection 10620 ]); 10621 const assets = (0, import_react.useMemo)(() => loading ? ASSET_LOADING_ITEMS : mediaAssets.map(convertToDamAsset), [mediaAssets, loading]); 10622 const handleTryAgain = () => { 10623 if (assetsError) reFetchAssets(); 10624 if (subCategoriesError) reFetchSubCategories(); 10625 }; 10626 const handleClosePreviewDialog = () => { 10627 setPreviewAssetIndex(PREVIEW_NO_ASSET_INDEX); 10628 if (assets[previewAssetIndex]) setTimeout(() => { 10629 assetGridEventTarget.scrollToAsset(assets[previewAssetIndex].id); 10630 }, 0); 10631 }; 10632 const hasNextPreview = previewAssetIndex != PREVIEW_NO_ASSET_INDEX && previewAssetIndex + 1 < assets.length; 10633 const hasPrevPreview = previewAssetIndex != PREVIEW_NO_ASSET_INDEX && previewAssetIndex - 1 >= 0; 10634 const noResult = !loading && !folders.length && !mediaAssets.length; 10635 const loadMore = (0, import_react.useCallback)((startIndex) => { 10636 if (networkStatus === NetworkStatus.fetchMore) return; 10637 const pageNumber = Math.floor((startIndex - folders.length) / 50); 10638 fetchMore({ variables: { pageNumber } }); 10639 }, [ 10640 folders, 10641 networkStatus, 10642 fetchMore 10643 ]); 10644 const totalAssetCount = resultsCount + folders.length; 10645 const assetThreeDotsMenuAsset = assets.find(({ id }) => id === assetThreeDotsMenuAssetId); 10646 const handleAssetMenuClosed = (0, import_react.useCallback)(() => { 10647 if (!selectFolderDialogOpen) setAssetThreeDotsMenuAssetId(null); 10648 }, [selectFolderDialogOpen, setAssetThreeDotsMenuAssetId]); 10649 const onMoveConfirm = (targetFolderId) => { 10650 handleExternalAssetUpload({ 10651 asset: assetThreeDotsMenuAsset, 10652 successNotificationButtonParams: {
10653 setActiveTab, 10654 setCurrentFolderId 10655 }, 10656 destinationFolderId: targetFolderId 10657 }); 10658 setAssetThreeDotsMenuAssetId(null); 10659 }; 10660 if (error) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ErrorDamTab, { handleTryAgain }); 10661 return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [ 10662 /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_material.Box, { 10663 sx: containerSxProps, 10664 children: [ 10665 /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ActionBar, { 10666 trackingIdPrefix: "tracking-id-dam-tab", 10667 backButtonProps: !isTopLevel && { 10668 onClick: () => setCategoryPath(currentCategory.parentCategoryPath), 10669 folderName: currentCategory?.name 10670 }, 10671 additionalActionButton: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AcquiaThreeDotsMenu, {}) 10672 }), 10673 /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DebouncedSearch, { 10674 sx: { marginRight: "16px" }, 10675 initialValue: searchValue, 10676 placeholder: "Search media", 10677 onChangeCallback: setSearchValue, 10678 numberOfResults: !loading ? totalAssetCount : 0 10679 }),
10680 /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FiltersSection, { disabled: noResult }), 10681 noResult ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DamTabNoResult, { 10682 searchValue, 10683 isTopLevelCategoryPath: isTopLevel 10684 }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DamAssetGrid, { 10685 ...props, 10686 columnCount: props.columns || 2, 10687 onNavigateItem: setCategoryPath, 10688 assets, 10689 folders, 10690 loading, 10691 totalAssetCount, 10692 loadMoreAssets: loadMore, 10693 onPreviewAsset: (assetIndex) => setPreviewAssetIndex(assetIndex - folders.length), 10694 setAssetThreeDotsMenuAssetId, 10695 setAssetThreeDotsMenuAnchor 10696 }) 10697 ] 10698 }), 10699 assetThreeDotsMenuAsset && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AssetThreeDotsMenu, { 10700 asset: assetThreeDotsMenuAsset, 10701 anchor: assetThreeDotsMenuAnchor, 10702 closeMenu: () => setAssetThreeDotsMenuAnchor(null), 10703 onMenuClosed: handleAssetMenuClosed, 10704 openSelectFolderDialog: () => setSelectFolderDialogOpen(true), 10705 onMoveComplete: props.onMoveComplete, 10706 showFolderActionsSuccess: props.showFolderActionsSuccess, 10707 lastUpdated: assetThreeDotsMenuAsset.updatedAt 10708 }), 10709 assetThreeDotsMenuAsset && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MoveToFolderDialog, { 10710 open: selectFolderDialogOpen, 10711 onClose: () => setSelectFolderDialogOpen(false), 10712 itemsToMoveDetails: [{ 10713 isFolder: false, 10714 id: assetThreeDotsMenuAsset.id, 10715 name: assetThreeDotsMenuAsset.name, 10716 typeDetails: { 10717 capitalizedTypeName: "Asset", 10718 article: "An" 10719 } 10720 }], 10721 action: MoveToFolderDialogActions.ADD,
10722 rootFolderName: "Your Media", 10723 foldersById, 10724 foldersByParentFolderId, 10725 initialFolderId: rootFolder?.id, 10726 onCreateNewFolder: createEditorAssetFolder, 10727 getFolderNameErrorMessage: validateEditedFolderName, 10728 onMoveConfirm, 10729 itemsByParentFolderId: mediaByFolderId, 10730 trackingIdentifier: "media-lib" 10731 }), 10732 assets.length > 0 && previewAssetIndex !== PREVIEW_NO_ASSET_INDEX && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AssetPreviewDialog, { 10733 name: assets[previewAssetIndex].name, 10734 description: "", 10735 url: assets[previewAssetIndex].mediaUrl, 10736 posterUrl: assets[previewAssetIndex].largeThumbnailUrl || assets[previewAssetIndex].thumbnailUrl, 10737 isVideo: assets[previewAssetIndex].mediaType === EditorLibraryMediaType.Video, 10738 open: previewAssetIndex !== PREVIEW_NO_ASSET_INDEX, 10739 onClose: handleClosePreviewDialog, 10740 hasNext: hasNextPreview, 10741 onNext: () => hasNextPreview && setPreviewAssetIndex(previewAssetIndex + 1), 10742 hasPrev: hasPrevPreview, 10743 onPrev: () => hasPrevPreview && setPreviewAssetIndex(previewAssetIndex - 1), 10744 PaperProps: PreviewAssetDialogPaperProps 10745 }) 10746 ] }); 10747}; 10748var containerSxProps = { 10749 display: "flex", 10750 flexDirection: "column", 10751 gap: "16px", 10752 width: "100%", 10753 height: "100%", 10754 minHeight: 0 10755}; 10756//#endregion 10757//#region common/types/serviceTypes.ts 10758var ThirdPartyServiceType = /* @__PURE__ */ function(ThirdPartyServiceType) { 10759 ThirdPartyServiceType["Acquia"] = "acquia"; 10760 return ThirdPartyServiceType; 10761}({}); 10762//#endregion 10763//#region client/components/editor/Components/TruffleEditingWorkSpace/Components/Libraries/Components/TruffleMediaLibrary/DamTab/ConnectToAcquiaDialog.tsx 10764var ConnectToAcquiaDialog = (props) => { 10765 const [userInput, setUserInput] = (0, import_react.useState)(""); 10766 const [loading, setLoading] = (0, import_react.useState)(false); 10767 const accountId = useActiveAccountId(); 10768 const pendo = PendoService.getInstance(); 10769 const onSubmit = async () => { 10770 setLoading(true); 10771 const authUri = await getService("oAuth2Services").getAuthUri(accountId, ThirdPartyServiceType.Acquia, userInput); 10772 window.open(authUri, "_blank", "width=1200, height=900"); 10773 props.onClose(); 10774 setLoading(false); 10775 const urlToReport = userInput + ".widencollective.com"; 10776 pendo.trackEvent("DAM authentication started", { 10777 DAMtype: "Acquia", 10778 URL: urlToReport 10779 }); 10780 }; 10781 const submitButtonDisabled = !userInput; 10782 return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dist$3.SimpleInputDialog, { 10783 open: props.open, 10784 dialogTitle: "Provide your Acquia DAM", 10785 HelpCenterIconButtonProps: { onClick: (event) => { 10786 openArticleInHelpCenter({ 10787 buttonId: "cd828afb-a421-4ab9-befb-8800ae66825e", 10788 anchorRef: event.currentTarget, 10789 trackingSource: InAppHelpCenterTrackingSource.Editor, 10790 trackingDialogName: "Connect to Acquia" 10791 }); 10792 } }, 10793 primaryActionButtonText: "Submit", 10794 secondaryActionButtonText: "Cancel", 10795 PrimaryActionButtonProps: { 10796 onClick: onSubmit, 10797 disabled: submitButtonDisabled, 10798 loading, 10799 "data-tracking-id": "tracking-id-dam-integration-acquia-url-submit-btn" 10800 }, 10801 SecondaryActionButtonProps: { onClick: props.onClose }, 10802 onClose: props.onClose, 10803 children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_material.Box, { 10804 sx: { 10805 display: "flex", 10806 flexDirection: "column", 10807 gap: "16px" 10808 }, 10809 children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Typography, { 10810 variant: "body1", 10811 color: "text.primary", 10812 children: "Type or paste your Acquia DAM URL (Widen version)" 10813 }), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_material.Box, { 10814 sx: { 10815 display: "flex", 10816 flexDirection: "row", 10817 gap: "4px", 10818 alignItems: "center" 10819 }, 10820 children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.TextField, { 10821 autoFocus: true, 10822 sx: { width: "252px" }, 10823 variant: "outlined", 10824 size: "small", 10825 placeholder: "Mysite", 10826 value: userInput, 10827 onChange: (e) => setUserInput(e.target.value), 10828 onKeyPress: (e) => e.key === "Enter" && !submitButtonDisabled && onSubmit() 10829 }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Typography, { 10830 variant: "caption", 10831 color: "text.primary", 10832 children: ".widencollective.com" 10833 })] 10834 })] 10835 }) 10836 }); 10837}; 10838//#endregion 10839//#region client/components/editor/Components/TruffleEditingWorkSpace/Components/Libraries/Components/TruffleMediaLibrary/DamTab/ConnectToDamMenu.tsx 10840var acquiaIcon = new URL("data:image/svg+xml,%3csvg%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M11.5552%2024C11.1355%2023.9384%2010.7111%2023.9005%2010.2976%2023.8
10840125C6.49783%2023.0003%204.11739%2020.6368%203.08589%2016.9622C2.162%2013.6681%203.02429%2010.7042%205.21996%208.14642C6.0193%207.21509%206.975%206.41033%207.907%205.60286C9.49757%204.22347%2010.682%202.551%2011.6154%200.68496C11.6831%200.55433%2011.7291%200.414224%2011.8056%200.29104C11.8801%200.188189%2011.962%200.0909172%2012.0506%200C12.1301%200.087677%2012.2028%200.181358%2012.2679%200.28021C12.6483%200.967877%2013.0002%201.67179%2013.4016%202.34592C14.3701%203.97033%2015.7143%205.2482%2017.1594%206.45162C18.9428%207.93728%2020.3121%209.7397%2020.9443%2012.024C22.2776%2016.8397%2019.5229%2022.069%2014.8595%2023.5255C14.2124%2023.7286%2013.5227%2023.7922%2012.8533%2023.9228C12.7572%2023.9418%2012.6631%2023.9736%2012.5677%2024H11.5552ZM14.8608%2010.4274C14.6212%2010.7935%2014.4419%2011.1353%2014.1982%2011.4223C13.9458%2011.7201%2013.6303%2011.9638%2013.3447%2012.2345C13.2804%2012.2961%2013.231%2012.3746%2013.1667%2012.4376C13.0313%2012.5729%2013.0469%2012.6954%2013.1417%2012.8552C13.7705%2013.9192%2014.3965%2014.9852%2015.0064%2016.06C15.1302%2016.2786%2015.2771%2016.2935%2015.4768%2016.2387C16.3492%2016.0018%2017.0633%2015.0928%2017.114%2014.177C17.1682%2013.2065%2016.6748%2012.5296%2016%2011.9076C15.6345%2011.5692%2015.3556%2011.1408%2015.0429%2010.7475C14.9747%2010.6453%2014.9138%2010.5383%2014.8608%2010.4274ZM10.3551%2011.4893C9.90571%2011.4995%209.66881%2011.9408%209.90841%2012.3692C10.3761%2013.2024%2010.8614%2014.0248%2011.3426%2014.8505C12.0948%2016.1428%2012.8484%2017.4338%2013.6033%2018.7234C13.7948%2019.0489%2014.119%2019.1464%2014.404%2018.9887C14.6889%2018.831%2014.7708%2018.4987%2014.6009%2018.1663C14.4987%2017.9667%2014.3789%2017.7758%2014.2659%2017.5815C13.1617%2015.6864%2012.0583%2013.7928%2010.9555%2011.9008C10.8167%2011.6612%2010.6584%2011.4751%2010.3551%2011.4893ZM11.8164%2018.5596C11.7129%2018.3308%2011.6567%2018.1724%2011.5734%2018.0289C10.8587%2016.7957%2010.141%2015.5639%209.42041%2014.3334C8.93377%2013.4995%208.44983%2012.6643%207.95641%2011.8345C7.73915%2011.4704%207.36486%2011.3824%207.07652%2011.6071C6.83489%2011.7966%206.79699%2012.0937%206.98853%2012.4234C7.90768%2014.0058%208.82818%2015.5869%209.75003%2017.1666C10.0614%2017.7%2010.3653%2018.2374%2010.6861%2018.7647C10.835%2019.009%2011.0814%2019.143%2011.346%2019.011C11.5335%2018.9163%2011.6635%2018.7105%2011.8164%2018.5596Z'%20fill='%23CE306E'/%3e%3c/svg%3e", "" + import.meta.url).href; 10841var ConnectToDamMenu = (props) => { 10842 const [isConnectToAcquiaDialogOpen, setIsConnectToAcquiaDialogOpen] = (0, import_react.useState)(false); 10843 return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Menu, { 10844 open: props.open, 10845 slotProps: { paper: { sx: { width: "220px" } } }, 10846 anchorEl: props.anchorEl, 10847 onClose: props.onClose, 10848 anchorOrigin: { 10849 vertical: "bottom", 10850 horizontal: "left" 10851 }, 10852 transformOrigin: { 10853 vertical: -7, 10854 horizontal: -8 10855 }, 10856 autoFocus: false, 10857 children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_material.ListItemButton, { 10858 "data-tracking-id": "tracking-id-dam-integration-acquia", 10859 onClick: () => { 10860 props.onClose(); 10861 setIsConnectToAcquiaDialogOpen(true); 10862 }, 10863 children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.ListItemAvatar, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Avatar, { 10864 sx: { backgroundColor: "action.selected" }, 10865 children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Icon, { 10866 component: "img", 10867 src: acquiaIcon, 10868 sx: { 10869 width: "22px", 10870 height: "22px" 10871 } 10872 }) 10873 }) }
10873), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.ListItemText, { primary: "Acquia DAM" })] 10874 }) 10875 }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ConnectToAcquiaDialog, { 10876 open: isConnectToAcquiaDialogOpen, 10877 onClose: () => setIsConnectToAcquiaDialogOpen(false) 10878 })] }); 10879}; 10880//#endregion 10881//#region client/components/editor/Hooks/UseAccountServiceConnections/UseAccountServiceConnections.ts 10882var useAccountServiceConnections = (skip) => { 10883 const isFirstRender = (0, import_react.useRef)(true); 10884 const isReportedToPendo = (0, import_react.useRef)(false); 10885 const [wasAcquiaConnectedOnFirstCycle, setWasAcquiaConnectedOnFirstCycle] = (0, import_react.useState)(null); 10886 const { data, loading } = useAccountServiceConnectionsQuery({ skip }); 10887 const serviceConnections = data?.currentAccount?.accountServiceConnections?.map((s) => s.serviceType) ?? []; 10888 const pendo = PendoService.getInstance(); 10889 const hasAcquiaConnection = () => { 10890 return !!data?.currentAccount?.accountServiceConnections?.find((s) => s.serviceType === GqlClientServiceType.ACQUIA); 10891 }; 10892 (0, import_react.useEffect)(() => { 10893 if (!loading && data && isFirstRender.current) { 10894 setWasAcquiaConnectedOnFirstCycle(hasAcquiaConnection()); 10895 return () => { 10896 isFirstRender.current = false; 10897 }; 10898 } 10899 }, [loading, data]); 10900 (0, import_react.useEffect)(() => { 10901 if (!loading && data && !isReportedToPendo.current && wasAcquiaConnectedOnFirstCycle === false && hasAcquiaConnection()) { 10902 isReportedToPendo.current = true; 10903 pendo.trackEvent("DAM authentication succeeded", { DAMtype: "Acquia" }); 10904 } 10905 }, [ 10906 loading, 10907 data, 10908 wasAcquiaConnectedOnFirstCycle 10909 ]); 10910 return { 10911 serviceConnections, 10912 loading 10913 }; 10914}; 10915//#endregion 10916//#region client/components/editor/Components/TruffleEditingWorkSpace/Components/Libraries/Components/TruffleMediaLibrary/MediaLibraryHeader/UploadButton/UploadButton.tsx 10917var import_faCloudArrowUp = require_faCloudArrowUp(); 10918var UploadButton = ({ isRecordingEnabled = true, disabled }) => { 10919 const inputRef = (0, import_react.useRef)(null); 10920 const { currentFolderId } = (0, import_react.useContext)(TruffleMediaLibraryContext); 10921 const { createUploadHandler } = useUploadMediaAssets(currentFolderId, void 0, void 0, void 0, !isRecordingEnabled); 10922 const isAiVideoGenEnabled = isFeatureEnabled(featureFlagConst._EDITOR_GENERATE_VIDEO_WITH_AI); 10923 const imageUploadSizeLimitMB = getImageMaxUploadFileSizeMB(); 10924 const videoUploadSizeLimitMB = getVideoMaxUploadFileSizeMB(); 10925 const handleUpload = (e) => { 10926 createUploadHandler(UploadOrigin.COMPUTER_BROWSE)([...e.target.files]); 10927 e.target.value = null; 10928 }; 10929 return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Tooltip, { 10930 ...import_dist$3.commonTooltipProps, 10931 title: `Image format: jpg, png, gif. Size: Up to ${imageUploadSizeLimitMB}MB\n 10932Video format: mov, flv, mp4, webm. Size: Up to ${videoUploadSizeLimitMB}MB`, 10933 children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Button, { 10934 sx: { width: isAiVideoGenEnabled ? "106px" : "163px" }, 10935 size: "large", 10936 variant: "contained", 10937 startIcon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FontAwesomeIcon, { icon: import_faCloudArrowUp.faCloudArrowUp }), 10938 onClick: () => inputRef?.current.click(), 10939 "data-tracking-id": "tracking-id-media-lib-browse-computer", 10940 disabled, 10941 children: "Upload" 10942 }) 10943 }
10943), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("input", { 10944 ref: inputRef, 10945 hidden: true, 10946 accept: [...fileExtByMediaType[AcceptedFileTypes.Image.toLowerCase()], ...fileExtByMediaType[AcceptedFileTypes.Video.toLowerCase()]].join(","), 10947 type: "file", 10948 onChange: handleUpload, 10949 multiple: true 10950 })] }); 10951}; 10952//#endregion 10953//#region client/components/newNav/hooks/RecordingTool/UseRecordingToolMenuAnchor/useRecordingToolMenuAnchor.ts 10954var useRecordingToolMenuAnchor = () => { 10955 const recordingToolMenuAnchor = useReactiveVar(localRecordingToolMenuAnchorVar); 10956 const setRecordingToolMenuAnchor = (anchor, isFloatingMediaLibrary) => { 10957 if (anchor && isFloatingMediaLibrary !== void 0) anchor.dataset.isFloatingMediaLibrary = isFloatingMediaLibrary.toString(); 10958 localRecordingToolMenuAnchorVar(anchor); 10959 }; 10960 return { 10961 recordingToolMenuAnchor, 10962 setRecordingToolMenuAnchor 10963 }; 10964}; 10965//#endregion 10966//#region node_modules/@fortawesome/pro-regular-svg-icons/faCircleDot.js 10967var require_faCircleDot = /* @__PURE__ */ __commonJSMin(((exports) => { 10968 Object.defineProperty(exports, "__esModule", { value: true }); 10969 var prefix = "far"; 10970 var iconName = "circle-dot"; 10971 var width = 512; 10972 var height = 512; 10973 var aliases = [128280, "dot-circle"]; 10974 var unicode = "f192"; 10975 var svgPathData = "M256 512a256 256 0 1 1 0-512 256 256 0 1 1 0 512zm0-464a208 208 0 1 0 0 416 208 208 0 1 0 0-416zm0 304a96 96 0 1 1 0-192 96 96 0 1 1 0 192z"; 10976 exports.definition = { 10977 prefix, 10978 iconName, 10979 icon: [ 10980 width, 10981 height, 10982 aliases, 10983 unicode, 10984 svgPathData 10985 ] 10986 }; 10987 exports.faCircleDot = exports.definition; 10988 exports.prefix = prefix; 10989 exports.iconName = iconName; 10990 exports.width = width; 10991 exports.height = height; 10992 exports.ligatures = aliases; 10993 exports.unicode = unicode; 10994 exports.svgPathData = svgPathData; 10995 exports.aliases = aliases; 10996})); 10997//#endregion 10998//#region node_modules/@fortawesome/free-brands-svg-icons/faChrome.js 10999var require_faChrome = /* @__PURE__ */ __commonJSMin(((exports) => { 11000 Object.defineProperty(exports, "__esModule", { value: true }); 11001 var prefix = "fab"; 11002 var iconName = "chrome"; 11003 var width = 512; 11004 var height = 512; 11005 var aliases = []; 11006 var unicode = "f268"; 11007 var svgPathData = "M0 256c0-46.6 12.5-90.4 34.3-128.9L144.1 318.3c21.9 39.2 63.8 65.7 111.9 65.7 14.3 0 27.1-2.3 40.8-6.6L220.5 509.6C95.9 492.3 0 385.3 0 256zm365.1 65.6c12.3-19.2 18.9-42.5 18.9-65.6 0-38.2-16.8-72.5-43.3-96l152.7 0c12 29.6 18.6 62.1 18.6 96 0 141.4-114.6 255.1-256 256L365.1 321.6zM477.8 128L256 128c-62.9 0-113.7 44.1-125.5 102.7L54.2 98.5C101 38.5 174 0 256 0 350.8 0 433.5 51.5 477.8 128zM344 256a88 88 0 1 1 -176 0 88 88 0 1 1 176 0z"; 11008 exports.definition = { 11009 prefix, 11010 iconName, 11011 icon: [ 11012 width, 11013 height, 11014 aliases, 11015 unicode, 11016 svgPathData 11017 ] 11018 }; 11019 exports.faChrome = exports.definition; 11020 exports.prefix = prefix; 11021 exports.iconName = iconName; 11022 exports.width = width; 11023 exports.height = height; 11024 exports.ligatures = aliases; 11025 exports.unicode = unicode; 11026 exports.svgPathData = svgPathData; 11027 exports.aliases = aliases; 11028})); 11029//#endregion 11030//#region client/components/newNav/hooks/RecordingTool/UseRecordingState/useRecordingState.ts 11031var import_faCircleDot = require_faCircleDot(); 11032var import_faChrome = require_faChrome(); 11033var useRecordingState = () => { 11034 return useReactiveVar(localRecordingToolState); 11035}; 11036//#endregion 11037//#region client/logic/recordingTool/recordingToolUtils.ts 11038var getMediaStream = async (type, constraints) => { 11039 if (type === "screen") return navigator.mediaDevices.getDisplayMedia({ 11040 ...constraints, 11041 selfBrowserSurface: "include" 11042 }); 11043 else return navigator.mediaDevices.getUserMedia(constraints); 11044}; 11045var fetchDevices = async () => { 11046 const devices = await navigator.mediaDevices.enumerateDevices(); 11047 if (devices?.length > 0) { 11048 const groupedDevices = /* @__PURE__ */ new Map(); 11049 devices.forEach((device) => { 11050 if (device.kind !== "audioinput" && device.kind !== "videoinput") return; 11051 const key = device.groupId || device.deviceId; 11052 const cleanedDevice = { 11053 deviceId: device.deviceId, 11054 groupId: device.groupId, 11055 kind: device.kind, 11056 label: device.label, 11057 toJSON: device.toJSON 11058 }; 11059 if (!groupedDevices.has(key)) groupedDevices.set(key, {}); 11060 if (device.kind === "audioinput") groupedDevices.get(key).mic = cleanedDevice; 11061 else if (device.kind === "videoinput") groupedDevices.get(key).camera = cleanedDevice; 11062 }); 11063 return { 11064 cameras: Array.from(groupedDevices.values()).map(({ camera }) =>
11064 camera).filter(Boolean), 11065 mics: Array.from(groupedDevices.values()).map(({ mic }) => mic).filter(Boolean) 11066 }; 11067 } else return { 11068 cameras: [], 11069 mics: [] 11070 }; 11071}; 11072var permissionsDeniedHandler = (permissionDeniedCallback) => { 11073 navigator.permissions.query({ name: "camera" }).then((result) => { 11074 result.onchange = () => { 11075 if (result.state === "denied") permissionDeniedCallback("Camera"); 11076 }; 11077 }); 11078 navigator.permissions.query({ name: "microphone" }).then((result) => { 11079 result.onchange = () => { 11080 if (result.state === "denied") permissionDeniedCallback("Microphone"); 11081 }; 11082 }); 11083}; 11084var hasPermission = async (name) => { 11085 try { 11086 const { state } = await navigator.permissions.query({ name }); 11087 return state === "granted"; 11088 } catch { 11089 return false; 11090 } 11091}; 11092var getCameraWindowSize = () => { 11093 const halfScreenWidth = Math.floor(window.innerWidth / 2); 11094 const halfScreenHeight = Math.floor(window.innerHeight / 2); 11095 return { 11096 width: halfScreenWidth % 2 === 0 ? halfScreenWidth : halfScreenWidth - 1, 11097 height: halfScreenHeight % 2 === 0 ? halfScreenHeight : halfScreenHeight - 1 11098 }; 11099}; 11100var cleanLabel = (label) => label.replace(/^(Default - |Communications - )/, "").replace(/\s*\((\w{4}:\w{4})\)$/, "").replace(/(\s*\(.*?(Audio|Driver|HD|Bluetooth|USB).*?\))$/, "").trim(); 11101//#endregion 11102//#region common/videoQualityUtils.ts 11103/** 11104* Values are close to YouTube's upload recommendation: 11105* 11106* https://support.google.com/youtube/answer/1722171?hl=en#zippy=%2Cbitrate 11107* 11108*/ 11109var BPP_FOR_4K = .1; 11110var BPP_FOR_1080p = .15; 11111var BPP_FOR_720p = .2; 11112var HD_PIXEL_COUNT = 1920 * 1080; 11113var SD_PIXEL_COUNT = 1280 * 720; 11114var calculateRecommendedVideoBitrate = (width, height, framerate) => { 11115 if (!width || !height || !framerate) return; 11116 const pixelCount = width * height; 11117 const pixelPerSecond = pixelCount * framerate; 11118 if (pixelCount >= HD_PIXEL_COUNT) return BPP_FOR_4K * pixelPerSecond; 11119 else if (pixelCount >= SD_PIXEL_COUNT) return BPP_FOR_1080p * pixelPerSecond; 11120 return BPP_FOR_720p * pixelPerSecond; 11121}; 11122//#endregion 11123//#region client/logic/common/logging/recorderClientLogging.ts 11124var RecorderLoggingEventType = /* @__PURE__ */ function(RecorderLoggingEventType) { 11125 RecorderLoggingEventType["ErrorInOnStopFlow"] = "ErrorInOnStopFlow"; 11126 RecorderLoggingEventType["PreviewDialogOnSaveImpossibleState"] = "PreviewDialogOnSaveImpossibleState"; 11127 RecorderLoggingEventType["GetVideoDimensionsError"] = "GetVideoDimensionsError"; 11128 RecorderLoggingEventType["FailedToRecord"] = "FailedToRecord"; 11129 RecorderLoggingEventType["FailedToChangeCameraOrMic"] = "FailedToChangeCameraOrMic"; 11130 RecorderLoggingEventType["CameraPermissionsDenied"] = "CameraPermissionsDenied"; 11131 RecorderLoggingEventType["MicPermissionsDenied"] = "MicPermissionsDenied"; 11132 RecorderLoggingEventType["CameraAndMicPermissionsDenied"] = "CameraAndMicPermissionsDenied"; 11133 RecorderLoggingEventType["RecordingFailedToStart"] = "RecordingFailedToStart"; 11134 RecorderLoggingEventType["RecordingFailedToInitialize"] = "RecordingFailedToInitialize"; 11135 RecorderLoggingEventType["FailedToFetchMediaDevices"] = "FailedToFetchMediaDevices"; 11136 RecorderLoggingEventType["FailedToOpenPipWindow"] = "FailedToOpenPipWindow"; 11137 RecorderLoggingEventType["FailedToGetMediaStream"] = "FailedToGetMediaStream"; 11138 RecorderLoggingEventType["UploadRecordingFailed"] = "UploadRecordingFailed"; 11139 RecorderLoggingEventType["StreamStoppedUnexpectedly"] = "StreamStoppedUnexpectedly"; 11140 RecorderLoggingEventType["NoDeviceAvailable"] = "NoDeviceAvailable"; 11141 RecorderLoggingEventType["StartRecordingError"] = "StartRecordingError"; 11142 RecorderLoggingEventType["StopRecordingError"] = "StopRecordingError"; 11143 RecorderLoggingEventType["ResumeRecordingError"] = "ResumeRecordingError"; 11144 RecorderLoggingEventType["PauseRecordingError"] = "PauseRecordingError"; 11145 RecorderLoggingEventType["InvalidStateError"] = "InvalidStateError"; 11146 return RecorderLoggingEventType; 11147}({}); 11148var reportRecorderError = (e, recorderData) => { 11149 let errorDetails; 11150 if (e instanceof ErrorEvent) errorDetails = { 11151 message: e.message, 11152 name: e.error?.name, 11153 stack: e.error?.stack 11154 }; 11155 else errorDetails = { 11156 message: e.message, 11157 name: e.name, 11158 stack: e.stack 11159 }; 11160 const data = getLogReportContent(e.message, { 11161 ...recorderData, 11162 errorDetails 11163 }, ReportEventType.RecorderError, getReduxState()); 11164 getService("commonServices").reportLog(data); 11165}; 11166//#endregion 11167//#region client/logic/recordingTool/recorderError.ts
11168var RecorderError = class extends Error { 11169 constructor(message, recorderEventType, cause) { 11170 super(message); 11171 this.name = this.constructor.name; 11172 this.recorderEventType = recorderEventType; 11173 this.cause = cause; 11174 Object.setPrototypeOf(this, new.target.prototype); 11175 if (cause instanceof Error && cause?.stack) this.stack += `\nCaused by: ${cause.stack}`; 11176 } 11177}; 11178//#endregion 11179//#region client/logic/recordingTool/recordingToolSession.ts 11180var RECORDER_MIME_TYPE = "video/webm;codecs=\"vp9,opus\""; 11181var RECORDER_AUDIO_BITS_PER_SECOND = 192e3; 11182var VIDEO_TRACK_CONSTRAINTS = { 11183 frameRate: 25, 11184 width: { ideal: 1280 }, 11185 height: { ideal: 720 } 11186}; 11187var AUDIO_TRACK_CONSTRAINTS = { 11188 channelCount: 2, 11189 noiseSuppression: false, 11190 echoCancellation: false, 11191 sampleRate: { ideal: 48e3 } 11192}; 11193var RecordingState = /* @__PURE__ */ function(RecordingState) { 11194 RecordingState["Started"] = "SESSION_STARTED"; 11195 RecordingState["Recording"] = "RECORDING"; 11196 RecordingState["Paused"] = "PAUSED"; 11197 RecordingState["Ended"] = "SESSION_ENDED"; 11198 RecordingState["Error"] = "ERROR"; 11199 return RecordingState; 11200}({}); 11201var RecordingToolSingleSession = class { 11202 #sessionId; 11203 #type; 11204 #mediaStream; 11205 #mediaRecorder; 11206 #chunks = []; 11207 #currentCameraDevice; 11208 #currentMicDevice; 11209 #onStopCallback; 11210 #onErrorCallback; 11211 constructor(type, onStopCallback, onErrorCallback, currentCameraDevice, currentMicDevice) { 11212 this.#sessionId = v4(); 11213 this.#type = type; 11214 this.#onStopCallback = onStopCallback; 11215 this.#onErrorCallback = onErrorCallback; 11216 this.#currentCameraDevice = currentCameraDevice; 11217 this.#currentMicDevice = currentMicDevice; 11218 localRecordingToolState("SESSION_STARTED"); 11219 } 11220 get sessionId() { 11221 return this.#sessionId; 11222 } 11223 get type() { 11224 return this.#type; 11225 } 11226 get currentCameraDevice() { 11227 return this.#currentCameraDevice; 11228 } 11229 get currentMicDevice() { 11230 return this.#currentMicDevice; 11231 } 11232 #attemptAlternativeDevices = async (streamOptions) => { 11233 let cameras; 11234 try { 11235 cameras = (await fetchDevices()).cameras; 11236 } catch (err) { 11237 localRecordingToolState("ERROR"); 11238 throw new RecorderError("Failed to fetch or initialize devices", RecorderLoggingEventType.FailedToFetchMediaDevices, err); 11239 } 11240 for (const camera of cameras) try { 11241 return await getMediaStream(this.type, { 11242 ...streamOptions, 11243 video: { 11244 ...streamOptions.video, 11245 deviceId: { exact: camera.deviceId } 11246 } 11247 }); 11248 } catch (err) { 11249 if (err?.name === "NotReadableError") continue; 11250 if (err?.name !== "NotReadableError") { 11251 localRecordingToolState("ERROR"); 11252 throw new RecorderError("Failed to get media stream", RecorderLoggingEventType.FailedToGetMediaStream, err); 11253 } 11254 } 11255 localRecordingToolState("ERROR"); 11256 this.destroy(); 11257 throw new RecorderError("All cameras are in use or unavailable", RecorderLoggingEventType.NoDeviceAvailable); 11258 }; 11259 #initializeCapture = async (attemptAlternativeDevice = true) => { 11260 const constraints = { 11261 video: { 11262 ...VIDEO_TRACK_CONSTRAINTS, 11263 deviceId: this.type === "camera" && this.#currentCameraDevice?.deviceId ? { exact: this.#currentCameraDevice.deviceId } : void 0 11264 }, 11265 audio: { 11266 ...AUDIO_TRACK_CONSTRAINTS, 11267 deviceId: this.type === "camera" && this.#currentMicDevice?.deviceId ? { exact: this.#currentMicDevice.deviceId } : void 0 11268 } 11269 }; 11270 try { 11271 return await getMediaStream(this.type, constraints); 11272 } catch (err) { 11273 if (err?.name === "NotReadableError" && attemptAlternativeDevice) return await this.#attemptAlternativeDevices(constraints); 11274 if (this.type === "camera" && err?.name === "NotAllowedError") { 11275 localRecordingToolState("ERROR"); 11276 await this.#handleNotAllowedError(); 11277 } 11278 localRecordingToolState("ERROR"); 11279 throw new RecorderError("Recording failed to start", RecorderLoggingEventType.FailedToGetMediaStream, err); 11280 } 11281 }; 11282 #initializeRecorder = () => { 11283 if (!this.#mediaStream) { 11284 localRecordingToolState("ERROR"); 11285 throw new RecorderError("Failed to initialize recorder", RecorderLoggingEventType.RecordingFailedToInitialize); 11286 } 11287 const { width, height, frameRate } = this.#mediaStream.getVideoTracks()[0].getSettings(); 11288 const options = { 11289 mimeType: RECORDER_MIME_TYPE, 11290 videoBitsPerSecond: calculateRecommendedVideoBitrate(width, height, frameRate), 11291 audioBitsPerSecond: RECORDER_AUDIO_BITS_PER_SECOND 11292 }; 11293 try { 11294 this.#mediaRecorder = new MediaRecorder(this.#mediaStream, options); 11295 this.#mediaRecorder.ondataavailable = (event) => { 11296 if (event.data.size > 0) this.#chunks.push(event.data); 11297 }; 11298 this.#mediaRecorder.onstop = () => { 11299 const blob = new Blob(this.#chunks, { type: options.mimeType }); 11300 this.#onStopCallback(blob); 11301 this.destroy(); 11302 localRecordingToolState("SESSION_ENDED"); 11303 }; 11304 this.#mediaRecorder.onerror = (error) => { 11305 localRecordingToolState("ERROR"); 11306 this.destroy(); 11307 this.#onErrorCallback?.(error, { 11308 recorderEventType: RecorderLoggingEventType.FailedToRecord, 11309 metadata: { 11310 sessionId: this.#sessionId, 11311 state: localRecordingToolState(), 11312 stream: this.#mediaStream, 11313 type: this.#type 11314 } 11315 }); 11316 }; 11317 } catch (err) { 11318 localRecordingToolState("ERROR"); 11319 throw new RecorderError("Failed to initialize recorder", RecorderLoggingEventType.RecordingFailedToInitialize, err); 11320 } 11321 }; 11322 #cleanupRecorder = () => { 11323 if (this.#mediaRecorder) { 11324 this.#mediaRecorder.onstop = null; 11325 this.#mediaRecorder.ondataavailable = null; 11326 this.#mediaRecorder.stop(); 11327 this.#chunks = []; 11328 this.#mediaRecorder = null; 11329 } 11330 }; 11331 #cleanupMediaStream = () => { 11332 if (this.#mediaStream) {
11333 this.#mediaStream.getTracks().forEach((track) => { 11334 track.stop(); 11335 }); 11336 this.#mediaStream = null; 11337 } 11338 }; 11339 #handleStreamStoppedUnexpectedly = () => { 11340 const handler = () => { 11341 if (localRecordingToolState() === "SESSION_STARTED") { 11342 localRecordingToolState("ERROR"); 11343 this.#mediaStream = null; 11344 this.#onErrorCallback?.(/* @__PURE__ */ new Error("Stream stopped unexpectedly"), { 11345 recorderEventType: RecorderLoggingEventType.StreamStoppedUnexpectedly, 11346 metadata: { 11347 sessionId: this.#sessionId, 11348 state: localRecordingToolState(), 11349 type: this.#type 11350 } 11351 }); 11352 } 11353 }; 11354 this.#mediaStream?.getTracks().forEach((track) => { 11355 track.onended = handler; 11356 }); 11357 }; 11358 #handleNotAllowedError = async () => { 11359 const isVideoPermissionGranted = await hasPermission("camera"); 11360 const isAudioPermissionGranted = await hasPermission("microphone"); 11361 if (isVideoPermissionGranted) { 11362 localRecordingToolPermissionsDeniedState("microphone"); 11363 localRecordingToolState("ERROR"); 11364 throw new RecorderError("Failed to start recording due to mic permissions", RecorderLoggingEventType.MicPermissionsDenied); 11365 } 11366 if (isAudioPermissionGranted) { 11367 localRecordingToolPermissionsDeniedState("camera"); 11368 localRecordingToolState("ERROR"); 11369 throw new RecorderError("Failed to start recording due to camera permissions", RecorderLoggingEventType.CameraPermissionsDenied); 11370 } 11371 localRecordingToolPermissionsDeniedState("cameraAndMicrophone"); 11372 localRecordingToolState("ERROR"); 11373 throw new RecorderError("Failed to start recording due to camera and mic permissions", RecorderLoggingEventType.CameraAndMicPermissionsDenied); 11374 }; 11375 getMediaStream(type) { 11376 if (type && type !== this.type) return; 11377 return this.#mediaStream; 11378 } 11379 startRecording() { 11380 if (localRecordingToolState() !== "SESSION_STARTED") throw new RecorderError(`Cannot start recording when in state ${localRecordingToolState()}`, RecorderLoggingEventType.InvalidStateError); 11381 if (!this.#mediaRecorder) { 11382 localRecordingToolState("ERROR"); 11383 throw new RecorderError("No active recorder to start", RecorderLoggingEventType.StartRecordingError); 11384 } 11385 try { 11386 this.#mediaRecorder.start(); 11387 localRecordingToolState("RECORDING"); 11388 } catch (err) { 11389 localRecordingToolState("ERROR"); 11390 throw new RecorderError("Failed to start recording", RecorderLoggingEventType.StartRecordingError, err); 11391 } 11392 } 11393 stopRecording() { 11394 if (localRecordingToolState() !== "RECORDING" && localRecordingToolState() !== "PAUSED") throw new RecorderError(`Cannot stop recording when in state ${localRecordingToolState()}`, RecorderLoggingEventType.InvalidStateError); 11395 if (!this.#mediaRecorder) throw new RecorderError("No active recorder to stop", RecorderLoggingEventType.StopRecordingError); 11396 if (this.#mediaRecorder.state === "inactive") { 11397 this.destroy(); 11398 localRecordingToolState("SESSION_ENDED"); 11399 return; 11400 } else try { 11401 this.#mediaRecorder.stop(); 11402 } catch (err) { 11403 localRecordingToolState("ERROR"); 11404 throw new RecorderError("Failed to stop recording", RecorderLoggingEventType.StopRecordingError, err); 11405 } 11406 } 11407 pauseRecording() { 11408 if (localRecordingToolState() !== "RECORDING") throw new RecorderError(`Cannot pause recording when in state ${localRecordingToolState()}`, RecorderLoggingEventType.InvalidStateError); 11409 if (!this.#mediaRecorder) throw new RecorderError("No active recorder to pause", RecorderLoggingEventType.PauseRecordingError); 11410 try { 11411 this.#mediaRecorder.pause(); 11412 localRecordingToolState("PAUSED"); 11413 } catch (err) { 11414 localRecordingToolState("ERROR"); 11415 throw new RecorderError("Failed to pause recording", RecorderLoggingEventType.PauseRecordingError, err); 11416 } 11417 } 11418 resumeRecording() { 11419 if (!this.#mediaRecorder) throw new RecorderError("No active recorder to resume", RecorderLoggingEventType.ResumeRecordingError); 11420 try { 11421 this.#mediaRecorder.resume(); 11422 localRecordingToolState("RECORDING"); 11423 } catch (err) { 11424 localRecordingToolState("ERROR"); 11425 throw new RecorderError("Failed to resume recording", RecorderLoggingEventType.ResumeRecordingError, err); 11426 } 11427 } 11428 restartRecording() { 11429 this.#cleanupRecorder(); 11430 this.#initializeRecorder(); 11431 localRecordingToolState("SESSION_STARTED"); 11432 } 11433 async startCapture(attemptAlternativeDevice = true) { 11434 localRecordingToolState("SESSION_STARTED"); 11435 if (this.#mediaRecorder) this.#cleanupRecorder(); 11436 const stream = await this.#initializeCapture(attemptAlternativeDevice); 11437 this.#mediaStream = stream;
11438 if (this.type === "camera" && this.#mediaStream) try { 11439 const { cameras, mics } = await fetchDevices(); 11440 this.#currentCameraDevice = cameras.find((camera) => camera.deviceId === this.#mediaStream.getTracks().find((track) => track.kind === "video").getSettings().deviceId); 11441 this.#currentMicDevice = mics.find((mic) => mic.deviceId === this.#mediaStream.getTracks().find((track) => track.kind === "audio").getSettings().deviceId); 11442 } catch (e) {} 11443 this.#handleStreamStoppedUnexpectedly(); 11444 this.#initializeRecorder(); 11445 return [Object.assign(stream, { type: this.type })]; 11446 } 11447 destroy() { 11448 this.#cleanupRecorder(); 11449 this.#cleanupMediaStream(); 11450 } 11451}; 11452//#endregion 11453//#region client/components/editor/Components/TruffleEditingWorkSpace/Components/Libraries/Components/TruffleMediaLibrary/MediaLibraryHeader/RecordButton/RecordButton.tsx 11454var MIN_CHROME_VERSION = 116; 11455var getChromeVersion = async () => { 11456 try { 11457 if ("userAgentData" in navigator) { 11458 const chromeEntry = (await navigator.userAgentData.getHighEntropyValues(["fullVersionList"])).fullVersionList.find((entry) => entry.brand.toLowerCase().includes("chrome")); 11459 return chromeEntry ? parseInt(chromeEntry.version.split(".")[0], 10) : null; 11460 } 11461 const match = navigator.userAgent.match(/Chrome\/(\d+)/); 11462 return match ? parseInt(match[1], 10) : null; 11463 } catch (error) { 11464 return null; 11465 } 11466}; 11467var RecordButton = ({ isFloatingMediaLibrary = false, disabled }) => { 11468 const { setRecordingToolMenuAnchor } = useRecordingToolMenuAnchor(); 11469 const [minChromeVersion, setMinChromeVersion] = (0, import_react.useState)(true); 11470 const recordingState = useRecordingState(); 11471 const isAiVideoGenEnabled = isFeatureEnabled(featureFlagConst._EDITOR_GENERATE_VIDEO_WITH_AI); 11472 const sessionInProgress = recordingState === RecordingState.Started || recordingState === RecordingState.Recording || recordingState === RecordingState.Paused;
11473 const isDisabled = disabled || minChromeVersion || sessionInProgress; 11474 const isRecordingStarted = recordingState === RecordingState.Recording; 11475 (0, import_react.useEffect)(() => { 11476 getChromeVersion().then((version) => { 11477 if (version !== null) setMinChromeVersion(version < MIN_CHROME_VERSION); 11478 }); 11479 }, []); 11480 const getRecordButtonTooltipText = () => { 11481 if (minChromeVersion) return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_material.Box, { 11482 sx: { 11483 display: "flex", 11484 alignItems: "center", 11485 gap: "4px" 11486 }, 11487 children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(FontAwesomeIcon, { 11488 icon: import_faChrome.faChrome, 11489 size: "2xl" 11490 }), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [ 11491 `Update to Chrome ${MIN_CHROME_VERSION}`, 11492 " ", 11493 /* @__PURE__ */ (0, import_jsx_runtime.jsx)("br", {}), 11494 "to start recording awesome videos." 11495 ] })] 11496 }); 11497 if (sessionInProgress) return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [ 11498 "A recording is currently in progress. ", 11499 /* @__PURE__ */ (0, import_jsx_runtime.jsx)("br", {}), 11500 "To begin a new recording, you must first stop the current one." 11501 ] }); 11502 return ""; 11503 }; 11504 return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Tooltip, { 11505 title: getRecordButtonTooltipText(), 11506 placement: "top", 11507 children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Button, { 11508 sx: { 11509 position: "relative", 11510 width: isAiVideoGenEnabled ? "106px" : "163px", 11511 height: "32px" 11512 }, 11513 startIcon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FontAwesomeIcon, { icon: import_faCircleDot.faCircleDot }), 11514 size: "large", 11515 variant: "outlined", 11516 onClick: (e) => setRecordingToolMenuAnchor(e.currentTarget, isFloatingMediaLibrary), 11517 "data-tracking-id": "tracking-id-recorder-button-media-library", 11518 disabled: isDisabled, 11519 children: isRecordingStarted ? "Recording" : "Record" 11520 }) }) 11521 }); 11522}; 11523//#endregion 11524//#region client/components/editor/Components/TruffleEditingWorkSpace/Components/Libraries/Components/TruffleMediaLibrary/MediaLibraryHeader/GenerateButton/GenerateButton.tsx 11525var GenerateButton = ({ onGenerateClick, disabled }) => { 11526 const { isBlocked, tooltipMessage } = useAiMediaGenBlockState(); 11527 return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Tooltip, { 11528 title: tooltipMessage, 11529 children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Button, { 11530 variant: "contained", 11531 size: "large", 11532 color: "gradient", 11533 startIcon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FontAwesomeIcon, { icon: import_faSparkles.faSparkles }), 11534 onClick: onGenerateClick, 11535 sx: { width: "106px" }, 11536 "data-tracking-id": "tracking-id-media-lib-ai-media-generator-btn", 11537 disabled: isBlocked || disabled, 11538 children: "Generate" 11539 }) }) 11540 }); 11541}; 11542//#endregion 11543//#region client/components/editor/Components/TruffleEditingWorkSpace/Components/Libraries/Components/TruffleMediaLibrary/MediaLibraryHeader/MediaLibraryHeader.tsx 11544var MediaLibraryHeader = ({ isRecordingEnabled = true, isFloatingMediaLibrary = false, uploadButtonDisabled, recordButtonDisabled, generateButtonDisabled, onGenerateButtonClick }) => { 11545 const isAiVideoGenEnabled = isFeatureEnabled(featureFlagConst._EDITOR_GENERATE_VIDEO_WITH_AI); 11546 const { canEditEditorProgram } = useEditorPermissions(); 11547 return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_material.Box, { 11548 sx: { 11549 display: "flex", 11550 gap: "8px" 11551 }, 11552 children: [ 11553 /* @__PURE__ */ (0, import_jsx_runtime.jsx)(UploadButton, { 11554 isRecordingEnabled, 11555 disabled: uploadButtonDisabled || !canEditEditorProgram 11556 }),
11557 isAiVideoGenEnabled && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(GenerateButton, { 11558 onGenerateClick: onGenerateButtonClick, 11559 disabled: generateButtonDisabled || !canEditEditorProgram 11560 }), 11561 isRecordingEnabled && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RecordButton, { 11562 isFloatingMediaLibrary, 11563 disabled: recordButtonDisabled || !canEditEditorProgram 11564 }) 11565 ] 11566 }); 11567}; 11568//#endregion 11569//#region client/components/editor/Hooks/UseSelectedLibrary/useSelectedLibrary.ts 11570var useSelectedLibrary = () => { 11571 const { library: selectedLibrary, opener: selectedLibraryOpener } = useReactiveVar(localEditorSelectedLibraryVar); 11572 const openLibrary = (library, opener) => { 11573 localEditorSelectedLibraryVar({ 11574 library, 11575 opener 11576 }); 11577 }; 11578 const closeSelectedLibrary = () => { 11579 localEditorSelectedLibraryVar({ 11580 library: null, 11581 opener: null 11582 }); 11583 }; 11584 return { 11585 selectedLibrary, 11586 selectedLibraryOpener, 11587 openLibrary, 11588 closeSelectedLibrary 11589 }; 11590}; 11591//#endregion 11592//#region client/components/editor/Nooks/DockedMediaLibrary/dockedMediaLibrary.ts 11593function setDockedMediaLibrarySearchValue(value) { 11594 localEditorDockedMediaLibrarySearchValue(value); 11595} 11596function setDockedMediaLibraryFilterMediaType(value) { 11597 localEditorDockedMediaLibraryFilterMediaType(value); 11598} 11599function setDockedMediaLibraryFilterMediaSource(value) { 11600 localEditorDockedMediaLibraryFilterMediaSource(value); 11601} 11602function setDockedMediaLibraryFilterStockOrientation(value) { 11603 localEditorDockedMediaLibraryFilterStockOrientation(value); 11604} 11605function setDockedMediaLibraryFilterMinVideoDuration(value) { 11606 localEditorDockedMediaLibraryFilterMinVideoDuration(value); 11607} 11608function setDockedMediaLibraryFilterMaxVideoDuration(value) { 11609 localEditorDockedMediaLibraryFilterMaxVideoDuration(value); 11610} 11611function setDockedMediaLibrarySortBy(value) { 11612 localEditorDockedMediaLibrarySortBy(value); 11613} 11614function setDockedMediaLibrarySortDirection(value) { 11615 localEditorDockedMediaLibrarySortDirection(value); 11616} 11617function setDockedMediaLibraryStockSortOrder(value) { 11618 localEditorDockedMediaLibraryStockSortOrder(value); 11619} 11620function getDockedMediaLibraryActiveTab() { 11621 return localEditorDockedMediaLibraryActiveTab(); 11622} 11623function setDockedMediaLibraryActiveTab(value) { 11624 localEditorDockedMediaLibraryActiveTab(value); 11625} 11626function setDockedMediaLibraryCurrentFolderId(value) { 11627 localEditorDockedMediaLibraryCurrentFolderId(value); 11628} 11629function clearDockedMediaLibraryFilters() { 11630 localEditorDockedMediaLibraryFilterMediaType(MediaLibraryFilterMediaType.ALL); 11631 localEditorDockedMediaLibraryFilterMediaSource(MediaLibraryFilterMediaSource.ALL); 11632 localEditorDockedMediaLibraryFilterStockOrientation(MediaLibraryFilterMediaOrientation.ALL); 11633 localEditorDockedMediaLibraryFilterMinVideoDuration(0); 11634 localEditorDockedMediaLibraryFilterMaxVideoDuration(600); 11635} 11636function setDockedMediaLibrarySelectedItemData(value) { 11637 localEditorDockedMediaLibrarySelectedItemData(value); 11638} 11639//#endregion 11640//#region client/components/editor/Nooks/FloatingMediaLibrary/FloatingMediaLibrary.ts 11641function setFloatingMediaLibraryCurrentFolderId(value) { 11642 localEditorFloatingMediaLibraryCurrentFolderId(value); 11643} 11644function setFloatingMediaLibrarySelectedItemData(value) { 11645 localEditorFloatingMediaLibrarySelectedItemData(value); 11646} 11647//#endregion 11648//#region client/components/editor/Components/TruffleEditingWorkSpace/Components/MediaContainer/useShowInMediaLibrary.ts 11649var useShowInMediaLibrary = () => { 11650 const { selectedLibrary, openLibrary } = useSelectedLibrary(); 11651 const { assetLibraryMediaByGqlMediaId } = useAssetLibraryMedia(); 11652 const showInMediaLibrary = (mediaId) => { 11653 const media = assetLibraryMediaByGqlMediaId[mediaId]; 11654 if (selectedLibrary !== Libraries.TruffleMediaLibrary) openLibrary(Libraries.TruffleMediaLibrary, LibraryOpener.MediaPlaceholderConfiguration); 11655 if (getDockedMediaLibraryActiveTab() !== MediaLibraryActiveTab.YourLibrary) setDockedMediaLibraryActiveTab(MediaLibraryActiveTab.YourLibrary); 11656 if (media.folder?.id) setDockedMediaLibraryCurrentFolderId(media.folder?.id); 11657 setTimeout(() => { 11658 setDockedMediaLibrarySelectedItemData({ 11659 type: ItemType.YOUR_LIBRARY, 11660 id: media.id, 11661 mediaLocation: media.mediaLocation, 11662 mediaUrl: media.mediaUrl, 11663 mediaAgifUrl: media.mediaAgifUrl 11664 });
11665 assetGridEventTarget.scrollToAsset(media.id); 11666 }, 0); 11667 }; 11668 const showInFloatingMediaLibrary = (mediaId) => { 11669 const media = assetLibraryMediaByGqlMediaId[mediaId]; 11670 if (media.folder?.id) setFloatingMediaLibraryCurrentFolderId(media.folder.id); 11671 setTimeout(() => { 11672 setFloatingMediaLibrarySelectedItemData({ 11673 type: ItemType.YOUR_LIBRARY, 11674 id: media.id, 11675 mediaLocation: media.mediaLocation, 11676 mediaUrl: media.mediaUrl, 11677 mediaAgifUrl: media.mediaAgifUrl 11678 }); 11679 assetGridEventTarget.scrollToAsset(media.id); 11680 }, 0); 11681 }; 11682 return { 11683 showInMediaLibrary, 11684 showInFloatingMediaLibrary 11685 }; 11686}; 11687//#endregion 11688//#region client/components/editor/Components/TruffleEditingWorkSpace/Components/Libraries/Components/TruffleMediaLibrary/TruffleMediaLibraryBase.tsx 11689var MediaLibraryTabSxProps = { 11690 ...tabSxProps, 11691 padding: "3.5px 8px", 11692 minHeight: 0 11693}; 11694var TruffleMediaLibraryBase = ({ isHeaderEnabled = true, isRecordingEnabled = true, isFloatingMediaLibrary = false, isOpenedFromCreativeEditor = false, aiGenerateDialogProps, ...props }) => { 11695 const { activeTab, setActiveTab, multiSelectItems, addItemToMultiSelect, removeItemFromMultiSelect } = (0, import_react.useContext)(TruffleMediaLibraryContext); 11696 const [mediaIdToShowInLibraryWhenAvailable, setMediaIdToShowInLibraryWhenAvailable] = (0, import_react.useState)(null); 11697 const { showInMediaLibrary, showInFloatingMediaLibrary } = useShowInMediaLibrary(); 11698 const { assetLibraryMediaByGqlMediaId, assetLibraryMedia } = useAssetLibraryMedia(); 11699 const { isGenerateFromLibrary = true, openGenerateDialog } = aiGenerateDialogProps ?? {}; 11700 const setAssetGenerationDialogInfo = useSetAiGenerationDialogInfo(); 11701 const { serviceConnections } = useAccountServiceConnections(); 11702 const isConnectedToDam = serviceConnections?.includes(GqlClientServiceType.ACQUIA); 11703 (0, import_react.useEffect)(() => { 11704 if (activeTab === MediaLibraryActiveTab.Dam && !isConnectedToDam) setActiveTab(MediaLibraryActiveTab.YourLibrary); 11705 }, [isConnectedToDam]); 11706 (0, import_react.useEffect)(() => { 11707 if (mediaIdToShowInLibraryWhenAvailable && assetLibraryMediaByGqlMediaId[mediaIdToShowInLibraryWhenAvailable]) { 11708 if (isGenerateFromLibrary) if (isFloatingMediaLibrary) showInFloatingMediaLibrary(mediaIdToShowInLibraryWhenAvailable); 11709 else showInMediaLibrary(mediaIdToShowInLibraryWhenAvailable); 11710 setMediaIdToShowInLibraryWhenAvailable(null); 11711 } 11712 }, [mediaIdToShowInLibraryWhenAvailable, assetLibraryMedia.length]); 11713 const onFinishGenerateFromLibrary = (0, import_react.useCallback)((asset) => { 11714 if (asset.type === ItemType.AI_IMAGE) handleUploadAiImageAsset({ 11715 asset, 11716 onUploadSuccess: (mediaId) => setMediaIdToShowInLibraryWhenAvailable(mediaId) 11717 }); 11718 else setMediaIdToShowInLibraryWhenAvailable(asset.id); 11719 }, []); 11720 const openGenerateDialogFromLibrary = () => { 11721 const flowTrigger = isOpenedFromCreativeEditor ? AssetGenerationFlowTrigger.IMGLY : isFloatingMediaLibrary ? AssetGenerationFlowTrigger.MEDIA_LIB_EXTERNAL : AssetGenerationFlowTrigger.MEDIA_LIB_LEFT_PANEL; 11722 setAssetGenerationDialogInfo({ 11723 isDialogOpen: true, 11724 onDialogConfirmation: onFinishGenerateFromLibrary, 11725 aspectRatioForGeneratedAssetsLegacy: GqlClientAiAspectRatio.LANDSCAPE, 11726 isGenerateFromLibrary: true, 11727 flowTrigger, 11728 ...props.mediaLibraryFilterMediaType === MediaLibraryFilterMediaType.IMAGES && isOpenedFromCreativeEditor && { disabledTabConfig: { 11729 disabledTab: AiMediaGenerationMode.VIDEO, 11730 tooltip: "Add a timeline in the Image Editor (previous screen) to create a video." 11731 } } 11732 }); 11733 }; 11734 const isGenerateVideoWithAiEnabled = isFeatureEnabled(featureFlagConst._EDITOR_GENERATE_VIDEO_WITH_AI); 11735 const isConvertToVideoEnabled = isFeatureEnabled(featureFlagConst._EDITOR_GEN_AI_EDIT_AND_CONVERT); 11736 const onConvertImageToVideoFromLibrary = (0, import_react.useCallback)((imageUrl, mediaId) => { 11737 const flowTrigger = isOpenedFromCreativeEditor ? AssetGenerationFlowTrigger.IMGLY : isFloatingMediaLibrary ? AssetGenerationFlowTrigger.MEDIA_LIB_EXTERNAL : AssetGenerationFlowTrigger.MEDIA_LIB_LEFT_PANEL; 11738 setAssetGenerationDialogInfo({ 11739 isDialogOpen: true, 11740 onDialogConfirmation: onFinishGenerateFromLibrary, 11741 aspectRatioForGeneratedAssetsLegacy: GqlClientAiAspectRatio.LANDSCAPE, 11742 isGenerateFromLibrary: true, 11743 flowTrigger, 11744 initialVideoStep: AiVideoGenerationStep.CONFIGURE_VIDEO, 11745 externalImageUrl: imageUrl, 11746 sourceImageMediaId: mediaId 11747 }); 11748 }, [ 11749 isOpenedFromCreativeEditor, 11750 isFloatingMediaLibrary, 11751 setAssetGenerationDialogInfo, 11752 onFinishGenerateFromLibrary 11753 ]); 11754 const [damIntegrationMenuAnchor, setDamIntegrationMenuAnchor] = (0, import_react.useState)(null); 11755 const multiSelectItemsRef = (0, import_react.useRef)(multiSelectItems); 11756 (0, import_react.useEffect)(() => { 11757 multiSelectItemsRef.current = multiSelectItems; 11758 }, [multiSelectItems]);
11759 const handleMultiSelectItemClick = (0, import_react.useCallback)((itemData) => { 11760 if (multiSelectItemsRef.current?.has(itemData.id)) removeItemFromMultiSelect(itemData.id); 11761 else addItemToMultiSelect(itemData.id); 11762 }, [addItemToMultiSelect, removeItemFromMultiSelect]); 11763 const multiSelectEnabled = multiSelectItems !== null; 11764 const yourLibraryProps = { 11765 isConnectedToDam, 11766 isRecordingEnabled, 11767 onConvertImageToVideoFromLibrary: isGenerateVideoWithAiEnabled && isConvertToVideoEnabled && !props.convertToVideoDisabledTooltip ? onConvertImageToVideoFromLibrary : void 0, 11768 ...multiSelectEnabled ? { 11769 ...props, 11770 enableDragDrop: false, 11771 onItemClick: handleMultiSelectItemClick 11772 } : props 11773 }; 11774 return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [ 11775 isHeaderEnabled && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MediaLibraryHeader, { 11776 isRecordingEnabled, 11777 isFloatingMediaLibrary, 11778 uploadButtonDisabled: multiSelectEnabled, 11779 recordButtonDisabled: multiSelectEnabled, 11780 generateButtonDisabled: multiSelectEnabled, 11781 onGenerateButtonClick: openGenerateDialog ?? openGenerateDialogFromLibrary 11782 }), 11783 /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_material.Tabs, { 11784 indicatorColor: "secondary", 11785 variant: "fullWidth", 11786 sx: { 11787 ...tabsSxProps, 11788 paddingRight: "16px", 11789 width: "100%" 11790 }, 11791 value: activeTab, 11792 onChange: (e, tab) => { 11793 if (tab) setActiveTab(tab); 11794 }, 11795 children: [
11796 /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Tab, { 11797 label: "Your Media", 11798 "data-tracking-id": "tracking-id-media-lib-your-media-tab", 11799 sx: MediaLibraryTabSxProps, 11800 value: MediaLibraryActiveTab.YourLibrary 11801 }), 11802 /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Tab, { 11803 label: "Stock", 11804 "data-tracking-id": "tracking-id-media-lib-stock-tab", 11805 sx: MediaLibraryTabSxProps, 11806 value: MediaLibraryActiveTab.Stock, 11807 disabled: multiSelectEnabled 11808 }), 11809 isConnectedToDam ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Tab, { 11810 label: "Acquia DAM", 11811 "data-tracking-id": "tracking-id-media-lib-acquia-tab", 11812 sx: MediaLibraryTabSxProps, 11813 value: MediaLibraryActiveTab.Dam, 11814 disabled: multiSelectEnabled 11815 }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Tab, { 11816 label: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Tooltip, { 11817 ...import_dist$3.commonTooltipProps, 11818 title: "Connect and import media assets", 11819 children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_material.Icon, { 11820 sx: { 11821 height: "auto", 11822 marginTop: "-4px" 11823 }, 11824 children: [ 11825 " ", 11826 /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FontAwesomeIcon, { 11827 icon: import_faPlug.faPlug, 11828 style: { fontSize: "16px" } 11829 }), 11830 " " 11831 ] 11832 }) 11833 }), 11834 sx: { 11835 ...MediaLibraryTabSxProps, 11836 maxWidth: "fit-content" 11837 }, 11838 onClick: (e) => setDamIntegrationMenuAnchor(e.currentTarget), 11839 "data-tracking-id": "tracking-id-media-lib-dam-integration-btn", 11840 value: null, 11841 disabled: multiSelectEnabled 11842 }) 11843 ] 11844 }), 11845 activeTab === MediaLibraryActiveTab.YourLibrary && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(YourLibraryTab, { ...yourLibraryProps }),
11846 activeTab === MediaLibraryActiveTab.Stock && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StockTab, { ...props }), 11847 activeTab === MediaLibraryActiveTab.Dam && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DamTab, { ...props }), 11848 /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ConnectToDamMenu, { 11849 open: Boolean(damIntegrationMenuAnchor), 11850 onClose: () => setDamIntegrationMenuAnchor(null), 11851 anchorEl: damIntegrationMenuAnchor 11852 }) 11853 ] }); 11854}; 11855//#endregion 11856//#region client/components/editor/Hooks/UseFloatingMediaLibrary/useFloatingMediaLibrary.ts 11857var useFloatingMediaLibraryCurrentFolderId = () => useReactiveVar(localEditorFloatingMediaLibraryCurrentFolderId); 11858var useFloatingMediaLibrarySelectedItemData = () => useReactiveVar(localEditorFloatingMediaLibrarySelectedItemData); 11859//#endregion 11860//#region client/components/editor/Components/TruffleEditingWorkSpace/Components/Libraries/Components/TruffleMediaLibrary/useMultiSelect.ts 11861function useMultiSelect() { 11862 const [multiSelectItems, setMultiSelectItems] = (0, import_react.useState)(null); 11863 const { loading, availableAssetsInYourLibraryById, foldersById } = useAssetLibraryMedia(); 11864 (0, import_react.useEffect)(() => { 11865 if (loading || multiSelectItems === null) return; 11866 const itemsToRemove = []; 11867 multiSelectItems.forEach((itemId) => { 11868 if (!(itemId in availableAssetsInYourLibraryById) && !foldersById.has(itemId)) itemsToRemove.push(itemId); 11869 }); 11870 if (itemsToRemove.length > 0) setMultiSelectItems((prev) => { 11871 const next = new Set(prev); 11872 itemsToRemove.forEach((itemId) => next.delete(itemId)); 11873 return next; 11874 }); 11875 }, [ 11876 loading, 11877 availableAssetsInYourLibraryById, 11878 foldersById, 11879 multiSelectItems 11880 ]); 11881 return { 11882 multiSelectItems, 11883 enableMultiSelect: (0, import_react.useCallback)(() => { 11884 setMultiSelectItems((prev) =>
11884 prev === null ? /* @__PURE__ */ new Set() : prev); 11885 }, []), 11886 disableMultiSelect: (0, import_react.useCallback)(() => { 11887 setMultiSelectItems((prev) => prev === null ? prev : null); 11888 }, []), 11889 addItemToMultiSelect: (0, import_react.useCallback)((itemId) => { 11890 setMultiSelectItems((prev) => { 11891 if (prev?.has(itemId)) return prev; 11892 const next = new Set(prev); 11893 next.add(itemId); 11894 return next; 11895 }); 11896 }, []), 11897 removeItemFromMultiSelect: (0, import_react.useCallback)((itemId) => { 11898 setMultiSelectItems((prev) => { 11899 if (!prev?.has(itemId)) return prev; 11900 const next = new Set(prev); 11901 next.delete(itemId); 11902 return next; 11903 }); 11904 }, []) 11905 }; 11906} 11907//#endregion 11908//#region client/components/editor/Components/TruffleEditingWorkSpace/Components/Libraries/Components/TruffleMediaLibrary/FloatingTruffleMediaLibrary.tsx 11909var contentSxProps = { 11910 display: "flex", 11911 flexDirection: "column", 11912 gap: "16px", 11913 width: "758px", 11914 height: "727px", 11915 overflow: "hidden" 11916}; 11917var getGifAssetUrl = (url) => url.replace(/\.gif\.mp4$/, ".gif"); 11918var WEBM_UNSUPPORTED_TOOLTIP = "WebM files aren't supported by the Advanced Media Editor"; 11919var isWebmUrl = (url) => url?.toLowerCase().endsWith(".webm") ?? false; 11920var FloatingTruffleMediaLibrary = (props) => { 11921 const selectedItemData = useFloatingMediaLibrarySelectedItemData(); 11922 const [searchValue, setSearchValue] = (0, import_react.useState)(""); 11923 const [filterMediaType, setFilterMediaType] = (0, import_react.useState)(props.mediaLibraryFilterMediaType ?? MediaLibraryFilterMediaType.ALL); 11924 const [filterMediaSource, setFilterMediaSource] = (0, import_react.useState)(MediaLibraryFilterMediaSource.ALL); 11925 const [filterStockOrientation, setFilterStockOrientation] = (0, import_react.useState)(MediaLibraryFilterMediaOrientation.ALL); 11926 const [filterMinVideoDuration, setFilterMinVideoDuration] = (0, import_react.useState)(0); 11927 const [filterMaxVideoDuration, setFilterMaxVideoDuration] = (0, import_react.useState)(600); 11928 const [sortBy, setSortBy] = (0, import_react.useState)(MediaLibrarySortBy.LAST_ADDED); 11929 const [sortDirection, setSortDirection] = (0, import_react.useState)(MediaLibrarySortDirection.TOP_TO_BOTTOM); 11930 const [stockSortOrder, setStockSortOrder] = (0, import_react.useState)(GqlClientGettySortOrder.BEST_MATCH); 11931 const [activeTab, setActiveTab] = (0, import_react.useState)(MediaLibraryActiveTab.YourLibrary); 11932 const clearFilters = () => { 11933 setFilterMediaType(props.mediaLibraryFilterMediaType ?? MediaLibraryFilterMediaType.ALL); 11934 setFilterMediaSource(MediaLibraryFilterMediaSource.ALL); 11935 setFilterStockOrientation(MediaLibraryFilterMediaOrientation.ALL); 11936 setFilterMinVideoDuration(0); 11937 setFilterMaxVideoDuration(600); 11938 }; 11939 const programId = useEditorProgramId(); 11940 const { assetLibraryMediaByGqlMediaId } = useAssetLibraryMedia(); 11941 const initialSelectedAssetLibraryMedia = useLibraryDirectAncestorMedia(props.initialSelectedMediaId); 11942 const initialFolderId = initialSelectedAssetLibraryMedia?.folder?.id || null; 11943 const initialItemData = { 11944 type: ItemType.YOUR_LIBRARY, 11945 id: initialSelectedAssetLibraryMedia?.id, 11946 mediaLocation: initialSelectedAssetLibraryMedia?.mediaLocation, 11947 mediaUrl: initialSelectedAssetLibraryMedia?.mediaUrl, 11948 mediaAgifUrl: initialSelectedAssetLibraryMedia?.mediaAgifUrl 11949 }; 11950 (0, import_react.useEffect)(() => { 11951 if (props.open) { 11952 setFloatingMediaLibrarySelectedItemData(initialItemData); 11953 disableMultiSelect(); 11954 setSearchValue(""); 11955 clearFilters(); 11956 setSortBy(MediaLibrarySortBy.LAST_ADDED); 11957 setSortDirection(MediaLibrarySortDirection.TOP_TO_BOTTOM); 11958 setStockSortOrder(GqlClientGettySortOrder.BEST_MATCH); 11959 setActiveTab(MediaLibraryActiveTab.YourLibrary); 11960 setFloatingMediaLibraryCurrentFolderId(initialFolderId); 11961 setTimeout(() => assetGridEventTarget.scrollToAsset(initialItemData.id), 0); 11962 } 11963 }, [props.open]); 11964 const generateCallbacks = (itemData) => { 11965 const onSuccess = (uploadedAsset) => { 11966 props.onAssetConfirm({ 11967 id: uploadedAsset.id, 11968 mediaLocation: uploadedAsset.mediaLocation, 11969 mediaUrl: uploadedAsset.mediaUrl, 11970 mediaAgifUrl: uploadedAsset.mediaAgifUrl 11971 }); 11972 upsertProcessedFile({ 11973 fileName: itemData.name, 11974 type: `${itemData.mediaType}/*`, 11975 status: "success" 11976 }); 11977 removeEditorUploadedGettyUrl({ target: props.uploadedGettyUrlTarget }); 11978 }; 11979 const onError = (error) => { 11980 upsertProcessedFile({ 11981 fileName: itemData.name,
11982 sskyCode: SskyErrorCode.AssetUploadError 11983 }); 11984 removeEditorUploadedGettyUrl({ target: props.uploadedGettyUrlTarget }); 11985 }; 11986 return { 11987 onSuccess, 11988 onError 11989 }; 11990 }; 11991 const onConfirmClick = async () => { 11992 if (multiSelectEnabled) { 11993 if (canMultiImport) props.onMultiAssetConfirm?.(multiSelectImportableAssetIds); 11994 props.onClose(); 11995 return; 11996 } 11997 switch (selectedItemData?.type) { 11998 case ItemType.FOLDER: 11999 truffleMediaLibraryContext.setCurrentFolderId(selectedItemData.id); 12000 return; 12001 case ItemType.YOUR_LIBRARY: 12002 props.onAssetConfirm({ 12003 id: selectedItemData.id, 12004 mediaLocation: getGifAssetUrl(selectedItemData.mediaLocation), 12005 mediaUrl: selectedItemData.mediaUrl, 12006 mediaAgifUrl: selectedItemData.mediaAgifUrl 12007 }); 12008 props.onClose(); 12009 return; 12010 case ItemType.STOCK: { 12011 props.isOpenedFromCreativeEditor && props.imglyOnAssetLoading(); 12012 upsertEditorUploadedGettyUrl({ 12013 target: props.uploadedGettyUrlTarget, 12014 assetId: selectedItemData.id, 12015 mediaUrl: selectedItemData.mediaUrl, 12016 thumbnailUrl: selectedItemData.thumbnailUrl 12017 }); 12018 upsertProcessedFile({ 12019 fileName: selectedItemData.name, 12020 status: "loading" 12021 }); 12022 props.onClose(); 12023 const { onSuccess, onError } = generateCallbacks(selectedItemData); 12024 await uploadGettyExternalEditorAssetMedia({ 12025 assetId: selectedItemData.id, 12026 assetType: selectedItemData.mediaType, 12027 downloadSizes: selectedItemData.downloadSizes, 12028 title: selectedItemData.name 12029 }, programId, onSuccess, onError); 12030 return; 12031 } 12032 case ItemType.DAM_ASSET: { 12033 props.isOpenedFromCreativeEditor && props.imglyOnAssetLoading(); 12034 upsertEditorUploadedGettyUrl({ 12035 target: props.uploadedGettyUrlTarget, 12036 assetId: selectedItemData.id, 12037 mediaUrl: selectedItemData.mediaUrl, 12038 thumbnailUrl: selectedItemData.thumbnailUrl 12039 }); 12040 upsertProcessedFile({ 12041 fileName: selectedItemData.name, 12042 status: "loading" 12043 }); 12044 props.onClose(); 12045 const { onSuccess, onError } = generateCallbacks(selectedItemData); 12046 await uploadEditorAssetMediaFromUrl({ 12047 url: selectedItemData.downloadUrl, 12048 filenameWithoutExtension: selectedItemData.name, 12049 mediaSource: GqlClientUploadEditorAssetFromUrlMediaSource.EXTERNAL, 12050 externalAssetDetails: { 12051 externalLibrary: selectedItemData.externalLibrary, 12052 externalLibraryAssetId: selectedItemData.id 12053 } 12054 }, onSuccess, onError); 12055 } 12056 } 12057 }; 12058 const { multiSelectItems, enableMultiSelect, disableMultiSelect, addItemToMultiSelect, removeItemFromMultiSelect } = useMultiSelect(); 12059 const truffleMediaLibraryContext = { 12060 searchValue, 12061 setSearchValue, 12062 filterMediaType, 12063 setFilterMediaType, 12064 filterMediaSource, 12065 setFilterMediaSource, 12066 filterStockOrientation, 12067 setFilterStockOrientation, 12068 filterMinVideoDuration, 12069 setFilterMinVideoDuration, 12070 filterMaxVideoDuration, 12071 setFilterMaxVideoDuration, 12072 clearFilters, 12073 sortBy, 12074 setSortBy, 12075 sortDirection, 12076 setSortDirection, 12077 stockSortOrder, 12078 setStockSortOrder, 12079 activeTab, 12080 setActiveTab, 12081 currentFolderId: useFloatingMediaLibraryCurrentFolderId(), 12082 setCurrentFolderId: setFloatingMediaLibraryCurrentFolderId, 12083 selectedItemData, 12084 setSelectedItemData: setFloatingMediaLibrarySelectedItemData, 12085 uploadFileFnAsync: uploadOptimizedEditorAssetMedia, 12086 multiSelectItems, 12087 enableMultiSelect, 12088 disableMultiSelect, 12089 addItemToMultiSelect, 12090 removeItemFromMultiSelect, 12091 trackingOrigin: props.trackingOrigin 12092 }; 12093 const handleItemMovedToFolder = (folderId) => { 12094 setActiveTab(MediaLibraryActiveTab.YourLibrary); 12095 truffleMediaLibraryContext.setCurrentFolderId(folderId); 12096 }; 12097 const isWebmFile = props.isOpenedFromCreativeEditor && selectedItemData && (() => { 12098 const damAsset = selectedItemData.type === ItemType.DAM_ASSET ? selectedItemData : null; 12099 switch (selectedItemData.type) { 12100 case ItemType.YOUR_LIBRARY: return isWebmUrl(selectedItemData.mediaLocation); 12101 case ItemType.STOCK: return isWebmUrl(selectedItemData.mediaUrl); 12102 case ItemType.DAM_ASSET: return isWebmUrl(damAsset.mediaUrl) || isWebmUrl(damAsset.downloadUrl); 12103 default: return false;
12104 } 12105 })(); 12106 const multiSelectEnabled = multiSelectItems !== null; 12107 const multiSelectImportableAssetIds = multiSelectItems ? Array.from(multiSelectItems).filter((id) => assetLibraryMediaByGqlMediaId[id] != null) : []; 12108 const multiSelectHasUnsupportedAsset = multiSelectImportableAssetIds.some((id) => isWebmUrl(assetLibraryMediaByGqlMediaId[id]?.mediaLocation)); 12109 const canMultiImport = !!props.isOpenedFromCreativeEditor && !!props.onMultiAssetConfirm && multiSelectImportableAssetIds.length > 0 && !multiSelectHasUnsupportedAsset; 12110 const isMultiSelectModifierPressed = useKeyPressed(MULTI_SELECT_MODIFIER_KEY); 12111 const selectedItemDataRef = (0, import_react.useRef)(selectedItemData); 12112 (0, import_react.useEffect)(() => { 12113 selectedItemDataRef.current = selectedItemData; 12114 }, [selectedItemData]); 12115 const onItemClick = (0, import_react.useCallback)((itemData) => { 12116 if (isMultiSelectModifierPressed) { 12117 enableMultiSelect(); 12118 if (selectedItemDataRef.current) addItemToMultiSelect(selectedItemDataRef.current.id); 12119 addItemToMultiSelect(itemData.id); 12120 } else if (!props.blockAssetSelection) setFloatingMediaLibrarySelectedItemData(itemData); 12121 }, [ 12122 isMultiSelectModifierPressed, 12123 enableMultiSelect, 12124 addItemToMultiSelect, 12125 props.blockAssetSelection 12126 ]); 12127 return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dist$3.SimpleInputDialog, { 12128 open: props.open, 12129 "data-testid": "floating-truffle-media-library", 12130 dialogTitle: props.dialogTitle || "Select Media", 12131 primaryActionButtonText: props.blockAssetSelection ? "Close" : canMultiImport ? `${props.primaryActionButtonText ?? "Save"} (${multiSelectImportableAssetIds.length})` : props.primaryActionButtonText ?? "Save", 12132 secondaryActionButtonText: props.blockAssetSelection ? void 0 : "Cancel", 12133 PrimaryActionButtonProps: { 12134 onClick: props.blockAssetSelection ? props.onClose : onConfirmClick, 12135 disabled: props.blockAssetSelection ? false : multiSelectEnabled ? !canMultiImport : !selectedItemData?.id || isWebmFile, 12136 variant: props.blockAssetSelection ? "outlined" : "contained", 12137 "data-tracking-id": props.blockAssetSelection ? `tracking-id-media-lib-dialog-${props.trackingName}-close` : `tracking-id-media-lib-dialog-${props.trackingName}-use` 12138 }, 12139 PrimaryActionTooltipProps: !props.blockAssetSelection && (multiSelectEnabled ? multiSelectHasUnsupportedAsset : isWebmFile) ? { title: WEBM_UNSUPPORTED_TOOLTIP } : void 0, 12140 SecondaryActionButtonProps: { 12141 onClick: props.onClose, 12142 disabled: multiSelectEnabled, 12143 "data-tracking-id": `tracking-id-media-lib-dialog-${props.trackingName}-cancel` 12144 }, 12145 maxWidth: "md", 12146 DialogContentProps: { sx: contentSxProps }, 12147 children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TruffleMediaLibraryContext.Provider, { 12148 value: truffleMediaLibraryContext, 12149 children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TruffleMediaLibraryBase, { 12150 enableDragDrop: false, 12151 onItemClick, 12152 onItemClickAway: () => {}, 12153 columns: 4, 12154 showFolderActionsSuccess: false, 12155 onFolderCreated: setFloatingMediaLibraryCurrentFolderId, 12156 onMoveComplete: handleItemMovedToFolder, 12157 hideMediaTypeFilter: props.hideMediaTypeFilter, 12158 mediaLibraryFilterMediaType: props.mediaLibraryFilterMediaType, 12159 isHeaderEnabled: props.isHeaderEnabled, 12160 isRecordingEnabled: props.isRecordingEnabled, 12161 isFloatingMediaLibrary: true, 12162 isOpenedFromCreativeEditor: props.isOpenedFromCreativeEditor, 12163 aiGenerateDialogProps: props.aiGenerateDialogProps, 12164 convertToVideoDisabledTooltip: props.convertToVideoDisabledTooltip 12165 }) 12166 }) 12167 }); 12168}; 12169//#endregion 12170//#region client/components/editor/Nooks/UserSettings/setUserSettings.ts 12171var import_dist$1 = require_dist$2(); 12172var import_Components = require_Components(); 12173var import_dist$2 = require_dist$1(); 12174var setUserSettings = async (userSettings) => { 12175 try { 12176 await getApolloClient().mutate({ 12177 mutation: UpsertUserSettingsDocument, 12178 variables: { upsertUserSettingsInput: userSettings } 12179 }); 12180 } catch (err) { 12181 const gqlError = err.graphQLErrors?.[0]; 12182 const sskyErrorCode = getSskyErrorCodeFromGqlError(gqlError);
12183 throw new EnhancedError(gqlError || err, sskyErrorCode); 12184 } 12185}; 12186//#endregion 12187//#region client/components/editor/Components/TruffleEditingWorkSpace/Components/EditMedia/CreativeEditor/sourceMediaContributionClientUtils.ts 12188/** 12189* Get an asset's source media contributions. If the asset already has contributions 12190* (it's derived), return them. Otherwise build a single contribution from the asset's own fields. 12191*/ 12192var getAssetSourceContributions = (asset) => { 12193 if (asset.sourceMediaContributions?.length) return asset.sourceMediaContributions.map((contribution) => ({ 12194 editorAssetMediaId: contribution.editorAssetMediaId, 12195 mediaOrigin: contribution.mediaOrigin, 12196 mediaType: contribution.mediaType, 12197 ...contribution.externalLibrary && { externalLibrary: contribution.externalLibrary }, 12198 ...contribution.externalLibraryAssetId && { externalLibraryAssetId: contribution.externalLibraryAssetId }, 12199 ...contribution.externalSublibrary && { externalSublibrary: contribution.externalSublibrary } 12200 })); 12201 return [{ 12202 editorAssetMediaId: asset.id, 12203 mediaOrigin: asset.mediaOrigin, 12204 mediaType: asset.mediaMetadata.mediaType, 12205 ...asset.externalLibrary && { externalLibrary: asset.externalLibrary }, 12206 ...asset.externalLibraryAssetId && { externalLibraryAssetId: asset.externalLibraryAssetId }, 12207 ...asset.externalSublibrary && { externalSublibrary: asset.externalSublibrary } 12208 }]; 12209}; 12210//#endregion 12211//#region client/components/editor/Hooks/UseScene/useScene.ts 12212var useScene = (sceneId) => { 12213 const { data } = useLocalEditorSceneQuery({ 12214 variables: { sceneId }, 12215 skip: !sceneId 12216 }); 12217 const scene = data?.localEditorScene ?? null; 12218 const setSceneName = (name) => { 12219 updateScene({ 12220 id: scene.id, 12221 name 12222 }); 12223 }; 12224 const setSceneDescription = (description) => { 12225 updateScene({ 12226 id: scene.id, 12227 description 12228 }); 12229 }; 12230 const setSceneSkipMode = (skipSceneMode) => { 12231 updateScene({ 12232 id: scene.id, 12233 skipSceneMode 12234 }); 12235 }; 12236 const setSceneSkipByAudienceBy = (skipSceneAudienceBy) => { 12237 updateScene({ 12238 id: scene.id, 12239 skipSceneAudience: { 12240 version: 1, 12241 by: skipSceneAudienceBy, 12242 valueIds: skipSceneAudienceBy === scene.skipSceneAudience?.by ? scene.skipSceneAudience?.valueIds : [] 12243 } 12244 }); 12245 }; 12246 const setSceneSkipByAudienceByValueIds = (skipSceneAudienceValueIds) => { 12247 updateScene({ 12248 id: scene.id, 12249 skipSceneAudience: { 12250 version: 1, 12251 by: scene.skipSceneAudience?.by, 12252 valueIds: skipSceneAudienceValueIds 12253 } 12254 }); 12255 }; 12256 const setSceneSelectedLayout = (themeId, layoutId) => { 12257 selectLayout({ 12258 sceneId: scene.id, 12259 themeId, 12260 animatedWireframeId: layoutId 12261 }); 12262 }; 12263 const setSceneColorCombination = (sceneColorCombination) => { 12264 updateScene({ 12265 id: scene.id, 12266 colorCombination: sceneColorCombination 12267 }); 12268 }; 12269 const setButtonAlignment = (buttonAlignment) => { 12270 updateScene({ 12271 id: scene.id, 12272 buttonAlignment 12273 }); 12274 }; 12275 const setSceneMinimumDuration = (minimumDuration) => { 12276 updateScene({ 12277 id: scene.id, 12278 minimumDuration 12279 }); 12280 }; 12281 const setSceneTransition = (hasTransition) => { 12282 updateScene({ 12283 id: scene.id, 12284 hasTransition 12285 }); 12286 }; 12287 return { 12288 scene, 12289 setSceneName, 12290 setSceneDescription, 12291 setSceneSelectedLayout, 12292 setSceneSkipMode, 12293 setSceneSkipByAudienceBy, 12294 setSceneSkipByAudienceByValueIds, 12295 setSceneColorCombination, 12296 setButtonAlignment, 12297 setSceneMinimumDuration, 12298 setSceneTransition 12299 }; 12300}; 12301//#endregion 12302//#region client/components/editor/Hooks/UseSelectedFrame/useSelectedFrame.ts 12303var useSelectedFrame = (sceneId) => { 12304 const frameIndex = useReactiveVar(localEditorSelectedFramePerSceneVar)[sceneId] ?? 0; 12305 const setFrameIndex = (selectedFrameIndex) => { 12306 return selectFrame(sceneId, selectedFrameIndex); 12307 }; 12308 return { 12309 frameIndex, 12310 setFrameIndex 12311 }; 12312}; 12313//#endregion 12314//#region client/components/editor/Hooks/UseEditorDataConnectorEnabled/useEditorDataConnectorEnabled.ts 12315var useEditorDataConnectorEnabled = () => { 12316 return { editorDataConnectorEnabled: useReactiveVar(localEditorDataConnectorEnabledVar) }; 12317}; 12318//#endregion 12319//#region client/components/editor/Hooks/UseEditorDynamicElements/useEditorDynamicElements.ts 12320var useEditorDynamicElements = (programId, programVersionId) => { 12321 const { data: dynamicElementsData, loading } = useEditorProgramDataConnectorQuery({ 12322 variables: { 12323 programVersionId, 12324 programId 12325 }, 12326 skip: !programId || !programVersionId 12327 }); 12328 const [dynamicElements, parsedDynamicElements, parsedDynamicElementsWithoutIdElement, parsedDynamicAndSystemElementsWithoutIdElement] = (0, import_react.useMemo)(() => { 12329 const dynamicElements = getDataLibraryDataElementsFromProgramVersion(dynamicElementsData?.editorProgram?.programVersion); 12330 const parsedDynamicElements = dynamicElements.map((de) => { 12331 return { 12332 ...de, 12333 serializedData: import_dist$2.DynamicElement.deserialize(de.data), 12334 origin: "account" 12335 }; 12336 }); 12337 const systemElements = getSystemElements().map((se) => { 12338 return { 12339 ...convertSystemDynamicElementToDataLibraryDynamicElement(se), 12340 serializedData: se, 12341 origin: "system" 12342 }; 12343 }); 12344 const parsedDynamicElementsWithoutIdElement = parsedDynamicElements.filter((de) => !isReservedIdWord(de?.serializedData?.target?.name)); 12345 return [ 12346 dynamicElements, 12347 parsedDynamicElements, 12348 parsedDynamicElementsWithoutIdElement, 12349 parsedDynamicElementsWithoutIdElement.concat(systemElements) 12350 ]; 12351 }, [dynamicElementsData?.editorProgram?.programVersion]); 12352 return { 12353 dynamicElements, 12354 parsedDynamicElements, 12355 parsedDynamicElementsWithoutIdElement, 12356 parsedDynamicAndSystemElementsWithoutIdElement, 12357 loading 12358 }; 12359}; 12360//#endregion 12361//#region client/components/editor/Hooks/UseStudioElements/useStudioElements.ts
12362var useStudioElements = () => { 12363 return useStudioElementsForProgramVersion(useEditorProgramId(), useEditorProgramVersionId()); 12364}; 12365var useStudioElementsForProgramVersion = (programId, programVersionId) => { 12366 const { data: studioElementsData, loading: loadingStudioElements } = useEditorStudioElementsQuery({ 12367 variables: { 12368 programId, 12369 programVersionId 12370 }, 12371 skip: !programId || !programVersionId 12372 }); 12373 const studioElements = studioElementsData?.editorProgram?.programVersion?.studioElements ?? []; 12374 const { dynamicElements: programDynamicElements, loading: loadingDynamicElements } = useEditorDynamicElements(programId, programVersionId); 12375 const dynamicElementsAsStudioElements = (0, import_react.useMemo)(() => { 12376 const sortedProgramDynamicElementsAsStudioElements = [...programDynamicElements.map((de) => convertProgramDynamicElementToStudioElement(de, false))].sort((a, b) => { 12377 if (a.origin === b.origin) return 0; 12378 return a.origin === StudioElementOrigin.Program ? -1 : 1; 12379 }); 12380 const systemElementsAsStudioElements = getSystemElements().map(convertSystemDynamicElementToStudioElement); 12381 return sortedProgramDynamicElementsAsStudioElements.concat(systemElementsAsStudioElements); 12382 }, [programDynamicElements]); 12383 const { editorDataConnectorEnabled } = useEditorDataConnectorEnabled(); 12384 return { 12385 studioElements: editorDataConnectorEnabled ? dynamicElementsAsStudioElements : studioElements, 12386 loading: loadingStudioElements || loadingDynamicElements 12387 }; 12388}; 12389var useByAudienceStudioElementOptions = (studioElements) => { 12390 return (0, import_react.useMemo)(() => { 12391 return studioElements.filter((studioElement) => !isReservedIdWord(studioElement.name)).map((studioElement) => ({ 12392 id: studioElement.localId, 12393 label: studioElement.name, 12394 disabled: !studioElement.valueSet?.length, 12395 origin: studioElement.origin 12396 })); 12397 }, [studioElements]); 12398}; 12399//#endregion 12400//#region client/components/editor/Nooks/LibraryEntities/libraryEntities.ts 12401var getAccountDataLibraryForProgram = (programId, programVersionId) => { 12402 return getApolloClient().cache.readQuery({ 12403 query: EditorProgramDataConnectorDocument, 12404 variables: { 12405 programId, 12406 programVersionId 12407 } 12408 })?.editorProgram?.programVersion?.accountDataLibraryVersion; 12409}; 12410var openLibrary = (library, opener) => { 12411 localEditorSelectedLibraryVar({ 12412 library, 12413 opener 12414 }); 12415}; 12416//#endregion 12417//#region client/components/editor/Components/TruffleEditingWorkSpace/Components/LivePreview/Components/PlaceHolderTools/Components/ContentConfiguration/Components/EmptyDataLibraryContainer.tsx 12418init_emotion_styled_browser_esm(); 12419var sxBaseContainer = { 12420 justifyContent: "center", 12421 display: "flex", 12422 flexDirection: "column", 12423 height: "119px", 12424 width: "376px" 12425}; 12426var StyleButton = newStyled(import_Components.SskyButton)` 12427 padding-left: 16px; 12428 font-size:13px; 12429 color: rgba(0, 83, 229, 1); 12430 width: fit-content; 12431`; 12432var getNoDataLibraryForAutocomplete = (programId, programVersionId, props) => { 12433 return shouldDisplayEmptyDataLibrary(programId, programVersionId) ? (listboxProps) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ul", { 12434 ...listboxProps, 12435 children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(NoDataLibraryContainer, { ...props }) 12436 }) : null; 12437}; 12438var getNoDataLibraryComponent = (programId, programVersionId, props) => { 12439 return shouldDisplayEmptyDataLibrary(programId, programVersionId) ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(NoDataLibraryContainer, { ...props }) : null; 12440}; 12441var shouldDisplayEmptyDataLibrary = (programId, programVersionId) => { 12442 const noDataLibrary = !getAccountDataLibraryForProgram(programId, programVersionId); 12443 const editorDataConnectorEnabled = getEditorDataConnectorEnabled(); 12444 return noDataLibrary && editorDataConnectorEnabled; 12445}; 12446var NoDataLibraryContainer = ({ containerSx, viewOnly, dataTestId }) => { 12447 const { openLibrary } = useSelectedLibrary(); 12448 const noLibrary = () => { 12449 return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_material.Box, { 12450 "data-testid": dataTestId, 12451 sx: containerSx ? { 12452 ...sxBaseContainer, 12453 ...containerSx 12454 } : sxBaseContainer, 12455 children: [
12456 /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Box, { 12457 sx: { 12458 padding: "24px", 12459 textAlign: "center", 12460 color: "text.secondary" 12461 }, 12462 children: "Select a data library to use for personalization" 12463 }), 12464 /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Divider, { variant: "fullWidth" }), 12465 /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyleButton, { 12466 variant: "text", 12467 label: "Select Data Library", 12468 disabled: viewOnly, 12469 onClick: () => openLibrary(Libraries.DataPanel, LibraryOpener.NoDataLibrary) 12470 }) 12471 ] 12472 }); 12473 }; 12474 return noLibrary(); 12475}; 12476//#endregion 12477//#region common/ssmlUtils.ts 12478/** 12479* Generate SSML from narration atoms. 12480* 12481* This function is shared between client (TTS preview) and server (VLX generation). 12482* 12483* @param atoms - Narration atoms (text, pause, or data element atoms) 12484* @param dataElementsValueByLocalId - Map of data element localId to resolved text (display name or VLX expression) 12485* @returns an EmbeddableSsml object 12486*/ 12487var generateNarrationSsml = (atoms, dataElementsValueByLocalId) => { 12488 const embeddableSsml = new import_dist$1.EmbeddableSsml(); 12489 if (!atoms || atoms.length === 0) return embeddableSsml; 12490 for (const atom of atoms) if (typeof atom.content === "string") embeddableSsml.say(atom.content); 12491 else if ("pause" in atom.content) { 12492 const MAX_PAUSE_SECONDS = 3; 12493 let remaining = atom.content.pause; 12494 while (remaining > 0) { 12495 const chunk = Math.min(remaining, MAX_PAUSE_SECONDS); 12496 embeddableSsml.pause(`${chunk}s`); 12497 remaining -= chunk; 12498 } 12499 } else if ("localId" in atom.content) { 12500 const resolvedText = dataElementsValueByLocalId[atom.content.localId] ?? ""; 12501 embeddableSsml.say(resolvedText, false); 12502 } else if ("cueId" in atom.content) embeddableSsml.cue(atom.content.cueId); 12503 return embeddableSsml; 12504}; 12505//#endregion 12506//#region client/components/editor/Components/TruffleEditingWorkSpace/Components/LivePreview/Components/PlaceHolderTools/Components/ContentConfiguration/Components/richTextMentionUtils.tsx 12507var buildDeltaOperationInsert = (content, studioElementsByLocalId, animationCuesWithDataByLocalId) => { 12508 if (content?.localId) { 12509 const studioElement = studioElementsByLocalId[content.localId]; 12510 if (studioElement?.localId) return { mention: { 12511 id: studioElement.localId, 12512 value: `{${studioElement.name}}`, 12513 denotationChar: "" 12514 } }; 12515 else return ""; 12516 } else if (content?.pause) return { pause: { duration: content.pause } }; 12517 else if (content?.cueId) { 12518 const { localId, ordinal, placeholders } = animationCuesWithDataByLocalId[content.cueId] || {}; 12519 if (!localId) return ""; 12520 return { animationCue: { 12521 localId, 12522 ordinal, 12523 placeholders 12524 } }; 12525 } else return content; 12526}; 12527var DisabledTooltip = () => { 12528 const learnMoreProps = useLearnMoreButton({ buttonId: "6bb40feb-5fec-469c-bdfa-462ab8507a9b" }); 12529 return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_material.Box, { 12530 component: "span", 12531 children: [ 12532 "Add values to this data field to use it for ", 12533 /* @__PURE__ */ (0, import_jsx_runtime.jsx)("br", {}), 12534 "narration personalization. ", 12535 /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Link, { 12536 ...learnMoreProps, 12537 color: "common.white", 12538 sx: { 12539 textDecoration: "underline", 12540 fontWeight: "700" 12541 }, 12542 children: "Learn more" 12543 }) 12544 ] 12545 }); 12546}; 12547var getMentionOptions = (programId, programVersionId, studioElements, isNarrationPlaceholder, isDisabledDueToAvatar, isProgramTemplate, originalLanguageUsedElementId) => { 12548 if (shouldDisplayEmptyDataLibrary(programId, programVersionId)) return []; 12549 if (isDisabledDueToAvatar) return studioElements.filter(({ name }) => !isReservedIdWord(name)).map(({ localId, name }) => ({ 12550 id: localId, 12551 value: name, 12552 disabled: true, 12553 disabledTooltip: "Avatars don't support personalization yet." 12554 })); 12555 return studioElements.filter(({ name, localId }) => !isReservedIdWord(name) && (!originalLanguageUsedElementId || localId === originalLanguageUsedElementId)).map(({ localId, name, valueSet }) => { 12556 const disabled = isNarrationPlaceholder && !valueSet?.length && !isProgramTemplate; 12557 return { 12558 id: localId, 12559 value: name, 12560 disabled, 12561 disabledTooltip: originalLanguageUsedElementId ? "Only tokens defined in the source language can be used in additional languages." : disabled ? /* @__P
12561URE__ */ (0, import_jsx_runtime.jsx)(DisabledTooltip, {}) : "" 12562 }; 12563 }); 12564}; 12565var getOriginLanguageUsedElementId = (originLanguageAtoms) => (originLanguageAtoms?.find((atom) => atom?.localId))?.localId; 12566var NoSourceLanguageTokenSuggestion = () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Paper, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_material.MenuItem, { 12567 disabled: true, 12568 children: [ 12569 "Personalization tokens can't be added", 12570 /* @__PURE__ */ (0, import_jsx_runtime.jsx)("br", {}), 12571 "because none exist in the source language." 12572 ] 12573}) }); 12574var getTextAtomContent = (op, isLast) => { 12575 if ((0, import_dist$3.isMentionOperation)(op)) return { localId: op.insert.mention.id }; 12576 if ((0, import_dist$3.isPauseOperation)(op)) return { pause: op.insert.pause.duration }; 12577 if ((0, import_dist$3.isAnimationCueOperation)(op)) return { cueId: op.insert.animationCue.localId }; 12578 return getStaticTextAtomContent(op, isLast); 12579}; 12580var getStaticTextAtomContent = (op, isLast) => { 12581 let text = op.insert; 12582 if (isLast && text.endsWith("\n")) text = text.slice(0, -1); 12583 return text; 12584}; 12585var onChangeCallbackDynamicCheck = (contents, initialHelperText, helperText, setHelperText, setIsDynamic) => { 12586 const updateHelperText = (newHelperText) => { 12587 if (helperText !== newHelperText) setHelperText(newHelperText); 12588 }; 12589 const isDynamic = contents.ops.some(import_dist$3.isMentionOperation); 12590 setIsDynamic?.(isDynamic); 12591 if (isDynamic && contents.ops.some((op) => typeof op.insert === "string" && op.insert.includes("{"))) updateHelperText("Only one personalization can be added"); 12592 else updateHelperText(initialHelperText); 12593}; 12594var getNarrationSsmlText = (text, studioElements) => { 12595 try { 12596 return generateNarrationSsml(text, studioElements.reduce((acc, element) => { 12597 acc[element.localId] = element.name || ""; 12598 return acc; 12599 }, {})).ssml(); 12600 } catch (error) { 12601 handleEditorError({ 12602 error, 12603 sskyCode: SskyErrorCode.NarrationPause 12604 }); 12605 return ""; 12606 } 12607}; 12608var getNarrationTextShowValueFromContent = (content) => { 12609 return content.ops.map((op, index) => { 12610 return { content: getTextAtomContent(op, index === content.ops.length - 1) }; 12611 }); 12612}; 12613var getSsmlTextForNarrationPreviewFromContent = (content, studioElements) => { 12614 return getNarrationSsmlText(getNarrationTextShowValueFromContent(content), studioElements); 12615}; 12616var isContentEmpty = (contents) => { 12617 return contents.ops.length === 1 && typeof contents.ops[0].insert === "string" && contents.ops[0].insert.trim() === ""; 12618}; 12619//#endregion 12620//#region client/components/editor/Components/TruffleEditingWorkSpace/Components/MainWorkSpace/utils.ts 12621var getNarrationPlaceholder = (scene, selectedFrameIndex) => { 12622 if (!scene) return; 12623 const selectedFrameCCPlaceholdersIds = (scene?.ccWireframe.frames)[selectedFrameIndex].placeholders.map((placeholder) => placeholder.id); 12624 return scene.placeholders.find((placeholder) => placeholder.ccPlaceholder.intent.type === GqlClientCcPlaceholderType.NARRATION && selectedFrameCCPlaceholdersIds.includes(placeholder.ccPlaceholder.id)); 12625}; 12626var getVideoAvatarsInfo = (scenes, libraryAvatars, customAvatars, language) => { 12627 const usedAvatars = /* @__PURE__ */ new Map(); 12628 scenes.forEach((scene) => scene.placeholders.filter((placeholder) => getPlaceholderType(placeholder) === CommonPlaceholderType.AVATAR).forEach((avatarPlaceholder) => { 12629 const usedAvatarInPH = getAvatarInfoFromPlaceholder(avatarPlaceholder, language); 12630 if (usedAvatars.has(`avatar_${usedAvatarInPH.avatarId}_${usedAvatarInPH.avatarLibrary}`)) { 12631 usedAvatars.get(`avatar_${usedAvatarInPH.avatarId}_${usedAvatarInPH.avatarLibrary}`).usedInScenesIDs.push(scene.id); 12632 return; 12633 } 12634 const avatar = getLibraryAvatarFromPlaceholder(avatarPlaceholder, libraryAvatars, customAvatars, language); 12635 if (!avatar) return; 12636 usedAvatars.set(`avatar_${usedAvatarInPH.avatarId}_${usedAvatarInPH.avatarLibrary}`, { 12637 avatarId: usedAvatarInPH.avatarId, 12638 avatarLibrary: usedAvatarInPH.avatarLibrary, 12639 usedInScenesIDs: [scene.id], 12640 localId: avatar.localId, 12641 avatarThumbnail: avatar.thumbnailUrl, 12642 avatarName: avatar.name, 12643 narratorId: avatar.narrator?.id 12644 }); 12645 })); 12646 return Array.from(usedAvatars.values()); 12647}; 12648var getCurrentSceneAvatar = (scene, libraryAvatars, customAvatars, language) => { 12649 if (!scene) return; 12650 const avatarPH = scene.placeholders.filter((placeholder) => getPlaceholderType(placeholder) === CommonPlaceholderType.AVATAR); 12651 if (!avatarPH.length) return; 12652 const usedAvatarInPH = getAvatarInfoFromPlaceholder(avatarPH[0], language); 12653 if (usedAvatarInPH.avatarLibrary === AvatarSource.CC) return libraryAvatars.find((avatar) => avatar.localId === usedAvatarInPH.avatarId); 12654 else return customAvatars.find((avatar) => avatar.localId === usedAvatarInPH.avatarId); 12655}; 12656var getAvatarsUsedInAlternativeVoice = (scenes, libraryAvatars, customAvatars) => { 12657 const usedAvatars = /* @__PURE__ */ new Map();
12658 scenes.forEach((scene) => { 12659 if (scene.placeholders.find((placeholder) => getPlaceholderType(placeholder) === CommonPlaceholderType.AVATAR)) return; 12660 const alternativeVoice = getNarrationAlternativeVoiceSetting(getNarrationPlaceholder(scene, 0).placeholderSettings); 12661 if (alternativeVoice?.useValue && alternativeVoice?.value?.narratorVoice) { 12662 const narratorId = alternativeVoice.value.narratorVoice.narratorId; 12663 const narratorLibrary = alternativeVoice.value.narratorVoice.narratorLibrary; 12664 const avatar = narratorLibrary === NarratorLibrary.CC_AVATARS ? libraryAvatars.find((avatar) => avatar.localId === narratorId) : customAvatars.find((avatar) => avatar.localId === narratorId); 12665 if (avatar) { 12666 const avatarLibrary = narratorLibrary === NarratorLibrary.CC_AVATARS ? AvatarSource.CC : AvatarSource.ACCOUNT; 12667 if (usedAvatars.has(`avatar_${avatar.id}_${avatarLibrary}`)) { 12668 usedAvatars.get(`avatar_${avatar.id}_${avatarLibrary}`).usedInScenesIDs.push(scene.id); 12669 return; 12670 } 12671 usedAvatars.set(`avatar_${avatar.id}_${avatarLibrary}`, { 12672 avatarId: avatar.id, 12673 avatarLibrary, 12674 usedInScenesIDs: [scene.id], 12675 localId: avatar.localId, 12676 avatarThumbnail: avatar.thumbnailUrl, 12677 avatarName: avatar.name 12678 }); 12679 } 12680 } 12681 }); 12682 return Array.from(usedAvatars.values()); 12683}; 12684var isLastUsageOfAvatar = (avatarLocalId, avatarLibrary, scenes) => { 12685 return scenes.filter((scene) => scene.placeholders.find((placeholder) => { 12686 if (getPlaceholderType(placeholder) !== CommonPlaceholderType.AVATAR) return false; 12687 return listLanguages(placeholder.placeholderContent.noRules.show).some((language) => { 12688 const avatarInfo = getAvatarInfoFromPlaceholder(placeholder, language); 12689 return avatarInfo.avatarId === avatarLocalId && avatarInfo.avatarLibrary === avatarLibrary; 12690 }); 12691 })).length === 1; 12692}; 12693var isDeltaEmpty = (delta) => { 12694 if (!delta || !Array.isArray(delta.ops)) return true; 12695 return delta.ops.filter((op) => { 12696 if (!op.insert) return false; 12697 if (typeof op.insert !== "string") return true; 12698 return op.insert.trim().length > 0; 12699 }).length === 0; 12700}; 12701var getNarrationTextAndRate = (placeholderContent, isUsingRules, studioElements, language) => { 12702 const narrationLanguageContent = getLanguageValue(isUsingRules ? placeholderContent.staticFallback : placeholderContent.noRules?.show, language); 12703 return { 12704 text: getPlainTextPlaceholderValueDynamic(narrationLanguageContent?.text, studioElements), 12705 rate: narrationLanguageContent?.speed || 1 12706 }; 12707}; 12708var getNarrationTextInformation = (placeholderContent, isUsingRules, studioElements, language) => { 12709 const narrationLanguageContent = getLanguageValue(isUsingRules ? placeholderContent.staticFallback : placeholderContent.noRules?.show, language); 12710 return { 12711 text: getPlainTextPlaceholderValueDynamic(narrationLanguageContent?.text, studioElements), 12712 ssmlText: getNarrationSsmlText(narrationLanguageContent?.text, studioElements), 12713 rate: narrationLanguageContent?.speed || 1 12714 }; 12715}; 12716//#endregion 12717//#region client/images/AI_error_optimized.png 12718var AI_error_optimized_default = "/client/images/AI_error_optimized.CaexZHnL.png"; 12719//#endregion 12720//#region client/components/newNav/hooks/UseAiVoicesTermsAcceptance/useAiVoicesTermsAcceptance.ts 12721/** 12722* Per-user acceptance state for the mandatory AI voices Terms & Conditions (CB-1715). 12723* Mirrors useGenerativeAIUsageAcceptance, but reads/writes the acceptedAiVoicesTerms / 12724* seenAiVoicesTerms user_settings columns. Reads via the shared userSettings query and 12725* writes via the shared upsertUserSettings mutation (both now include these fields), so 12726* an accept normalizes straight into the Apollo cache â no refetch, and any other gate 12727* reading the same query re-renders as accepted. 12728*/ 12729var useAiVoicesTermsAcceptance = (options) => { 12730 const userName = useUserData()?.userName ?? ""; 12731 const { loading, data } = useUserSettingsQuery({ 12732 variables: { id: userName }, 12733 skip: !userName || !!options?.skip 12734 }); 12735 return { 12736 isLoadingAcceptance: loading || !userName && !options?.skip, 12737 hasAcceptedAiVoicesTerms: !!data?.userSettings?.acceptedAiVoicesTerms, 12738 hasSeenAiVoicesTerms: !!data?.userSettings?.seenAiVoicesTerms, 12739 acceptAiVoicesTerms: (0, import_react.useCallback)(async () => { 12740 await setUserSettings({ acceptedAiVoicesTerms: true }); 12741 }, []), 12742 markAiVoicesTermsSeen: (0, import_react.useCallback)(async () => { 12743 await setUserSettings({ seenAiVoicesTerms: true }); 12744 }, []) 12745 }; 12746}; 12747//#endregion
12748//#region client/components/newNav/components/aiVoicesTerms/common.ts 12749var AI_VOICES_TERMS_ACCEPT_TRACKING_ID = "tracking-id-ai-voices-t-and-c-accept"; 12750var AI_VOICES_TERMS_CANCEL_TRACKING_ID = "tracking-id-ai-voices-t-and-c-cancel"; 12751/** 12752* The AI voices T&C dialog is shown from several entry points. The terms body is identical 12753* everywhere; only the title, primary-button label, and whether a close (x) icon is shown 12754* differ per entry point (see Figma "Terms and conditions", node 25014-23433). 12755*/ 12756var AiVoicesTermsVariant = /* @__PURE__ */ function(AiVoicesTermsVariant) { 12757 AiVoicesTermsVariant["FirstEntry"] = "firstEntry"; 12758 AiVoicesTermsVariant["AccessVideoPage"] = "accessVideoPage"; 12759 AiVoicesTermsVariant["Studio"] = "studio"; 12760 AiVoicesTermsVariant["CreateVideo"] = "createVideo"; 12761 AiVoicesTermsVariant["UseTemplate"] = "useTemplate"; 12762 AiVoicesTermsVariant["SubmitForApproval"] = "submitForApproval"; 12763 return AiVoicesTermsVariant; 12764}({}); 12765var GATED_ENTITY_TOKEN = "{video/template}"; 12766var aiVoicesTermsVariantConfig = { 12767 ["firstEntry"]: { 12768 title: "Accept the AI Voice Terms to create and edit videos in SundaySky", 12769 acceptButtonText: "Accept AI Voice Terms", 12770 showCloseIcon: false 12771 }, 12772 ["accessVideoPage"]: { 12773 title: `Review and accept the AI Voice Terms to access this ${GATED_ENTITY_TOKEN}`, 12774 acceptButtonText: `Accept terms to access ${GATED_ENTITY_TOKEN}`, 12775 showCloseIcon: true 12776 }, 12777 ["studio"]: { 12778 title: "Accept the AI Voice Terms to create and edit videos in SundaySky", 12779 acceptButtonText: "Accept AI Voice Terms", 12780 showCloseIcon: false 12781 }, 12782 ["createVideo"]: { 12783 title: "Accept the AI Voice Terms to create videos/templates in SundaySky", 12784 acceptButtonText: "Accept terms to create videos/templates", 12785 showCloseIcon: false 12786 }, 12787 ["useTemplate"]: { 12788 title: "To use this template, accept the AI Voice Terms", 12789 acceptButtonText: "Accept terms to use this template", 12790 showCloseIcon: false 12791 }, 12792 ["submitForApproval"]: { 12793 title: `To use this ${GATED_ENTITY_TOKEN}, accept the AI Voice Terms`, 12794 acceptButtonText: `Accept terms to use this ${GATED_ENTITY_TOKEN}`, 12795 showCloseIcon: false 12796 } 12797}; 12798var getAiVoicesTermsCopy = (variant, isTemplate) => { 12799 const { title, acceptButtonText, showCloseIcon } = aiVoicesTermsVariantConfig[variant]; 12800 const gatedEntity = isTemplate ? "template" : "video"; 12801 return { 12802 title: title.replace(GATED_ENTITY_TOKEN, gatedEntity), 12803 acceptButtonText: acceptButtonText.replace(GATED_ENTITY_TOKEN, gatedEntity), 12804 showCloseIcon 12805 }; 12806}; 12807//#endregion 12808//#region client/components/newNav/components/aiVoicesTerms/AiVoicesTermsContent.tsx 12809/** 12810* Verbatim third-party AI-voice terms shown (all providers stacked, per CB-1715) inside the 12811* scrollable box of the AI voices T&C dialog. 12812* 12813* - Amazon Polly + Google Text-to-Speech: verbatim from the SundaySky "Third-Party Terms" 12814* help-center article (the cited source of record). 12815* https://help.sundaysky.com/hc/en-us/articles/25401938228637-SundaySky-Third-Party-Terms 12816* 12817* - ElevenLabs: INTERIM copy taken from the Figma design. The authoritative, final text is the 12818* ticket attachment `third_party_terms_elevenlabs_terms__6_8_26_redline_.docx` (CB-1715). 12819* TODO(CB-1718): replace the ElevenLabs block below with the verbatim final (accepted-redline) 12820* text from that docx before shipping â the design text is truncated mid-sentence. 12821*/ 12822var headingSxProps = { 12823 marginTop: "16px", 12824 "&:first-of-type": { marginTop: 0 } 12825}; 12826var bodySxProps = { 12827 marginTop: "8px", 12828 whiteSpace: "pre-line" 12829}; 12830var ProviderTerms = ({ heading, children }) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Typography, { 12831 variant: "body1", 12832 component: "p", 12833 sx: headingSxProps, 12834 children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("strong", { children: heading }) 12835}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Typography, { 12836 variant: "body1", 12837 component: "div", 12838 sx: bodySxProps, 12839 children 12840})] }); 12841var AiVoicesTermsContent = () => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_material.Box, { children: [ 12842 /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(ProviderTerms, { 12843 heading: "ElevenLabs", 12844 children: [ 12845 "Relevant SundaySky Platform Components:", 12846 "\n\n", 12847 "AI Voice Library: multilingual-v2", 12848 "\n", 12849 "Custom Avatar Voices: multilingual-v2", 12850 "\n", 12851 "Custom AI Voice: multilingual-v2", 12852 "\n", 12853 "The Platform provides optional access and use of ElevenLabs AI generated voice content (the âElevenLabs Bundled Serviceâ). By using the ElevenLabs Bundled Service Customer and its Users agree to comply with the following ElevenLabs Terms governing such use:", 12854 "\n\n", 12855 "Customer may not use the ElevenLabs Bundled Service outside of or separate from its use of the Platform.", 12856 "\n\n", 12857 "As between Customer and ElevenLabs, Customer is and shall remain the sole and exclusive owner of all right, title, and interest in and to any and all data and information that (a) Customer or its Users transmit to ElevenLabsâ systems in connection with access or use of the ElevenLabs Bundled Services; or (b) is otherwise provided to ElevenLabs by or on behalf of Customer in connection with its use ((a) and (b), collectively, âInputâ).", 12858 "\n\n", 12859 "When Customer provides Input to ElevenLabs or the ElevenLabs Bundled Service, Customer may receive audio output generated and returned by one or more Voice Models (defined below), or text output generated and returned by one or more LLMs (defined below), based on Input (the âOutputâ) (Input and Output,
12859collectively, the âCustomer Contentâ). Outputs may be generated by, but do not include, ElevenLabsâ foundational and other artificial intelligence voice models (the âVoice Modelsâ) or ElevenLabsâ foundational and other artificial intelligence or language learning models (âLLMsâ) (Voice Models and LLMs, collectively, the âModelsâ). As between ElevenLabs and Customer, Customer owns all right, title and interest in and to the Output in perpetuity (but excluding, for clarity, any Models).", 12860 "\n\n", 12861 "Customer hereby grants to ElevenLabs an irrevocable, non-exclusive, non-transferable license to use Customer Content as necessary to perform ElevenLabsâ obligations and exercise ElevenLabsâ rights under these terms relating to the ElevenLabs Bundled Service. For the avoidance of doubt, ElevenLabs shall not use Customer Content for any training purposes other than as may be necessary for ElevenLabs to provide the ElevenLabs Bundled Service to Customer.", 12862 "\n\n", 12863 "Customer represents, covenants, and warrants that it will use the ElevenLabs Bundled Service and Output only in compliance with these terms, the Prohibited Use Policy (available at", 12864 " ", 12865 /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Link, { 12866 href: "https://elevenlabs.io/use-policy", 12867 target: "_blank", 12868 rel: "noreferrer", 12869 children: "https://elevenlabs.io/use-policy" 12870 }), 12871 ") (the âProhibited Use Policyâ), and all applicable laws, rules, and regulations.", 12872 "\n\n", 12873 "The ElevenLabsâ Data Processing Addendum (available at", 12874 " ", 12875 /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Link, { 12876 href: "https://elevenlabs.io/dpa", 12877 target: "_blank", 12878 rel: "noreferrer", 12879 children: "https://elevenlabs.io/dpa" 12880 }), 12881 ") (the âDPAâ) governs ElevenLabsâ Processing of any Personal Data in Input." 12882 ] 12883 }), 12884 /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(ProviderTerms, { 12885 heading: "Polly (Voice Over service)", 12886 children: [ 12887 "The SundaySky Platform provides optional access and use of the Amazon Polly voice generator service (the âPolly Serviceâ) to create voice overs from text prompts. By using the Polly Services Customer agrees to comply with the following Amazon Terms applicable to the Polly Service:", 12888 " ", 12889 /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Link, { 12890 href: "https://aws.amazon.com/service-terms/", 12891 target: "_blank", 12892 rel: "noreferrer", 12893 children: "https://aws.amazon.com/service-terms/" 12894 }), 12895 " ", 12896 "and each of the other policies and terms referenced in those terms as well as any replacement terms, as in effect from time to time." 12897 ] 12898 }), 12899 /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(ProviderTerms, { 12900 heading: "Google Text-to-Speech AI and Vertex", 12901 children: [ 12902 "The SundaySky Platform provides optional access and use of Google Text to Speech AI and Vertex (the âGoogle TTS Serviceâ), to convert text to speech using artificial intelligence.", 12903 "\n\n", 12904 "By using Google TTS Services Customer agrees to comply with the following Google TTS Terms: Google Terms of Service currently located at", 12905 " ", 12906 /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Link, { 12907 href: "https://policies.google.com/terms", 12908 target: "_blank", 12909 rel: "noreferrer", 12910 children: "https://policies.google.com/terms" 12911 }), 12912 "; Google TTS Service Specific terms currently located at", 12913 " ", 12914 /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Link, { 12915 href: "https://cloud.google.com/terms/service-terms", 12916 target: "_blank", 12917 rel: "noreferrer", 12918 children: "https://cloud.google.com/terms/service-terms" 12919 }), 12920 "; Google Generative AI Prohibited Use Policy currently located at", 12921 " ", 12922 /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Link, { 12923 href: "https://policies.google.com/terms/generative-ai/use-policy", 12924 target: "_blank", 12925 rel: "noreferrer", 12926 children: "https://policies.google.com/terms/generative-ai/use-policy" 12927 }), 12928 " ", 12929 "and each of the other policies and terms referenced in those terms as well as any replacement terms, as in effect from time to time." 12930 ] 12931 }) 12932] }); 12933//#endregion
12934//#region client/components/newNav/components/aiVoicesTerms/AiVoicesTermsDialog.tsx 12935var termsBoxSxProps = { 12936 height: "347px", 12937 padding: "12px 8px", 12938 overflow: "auto", 12939 borderRadius: "8px", 12940 border: (theme) => `1px solid ${theme.palette.grey[300]}`, 12941 backgroundColor: (theme) => theme.palette.grey[200] 12942}; 12943var AiVoicesTermsDialog = ({ open, variant, isTemplate = false, onAccept, onCancel }) => { 12944 const [hasAcceptedCheckbox, setHasAcceptedCheckbox] = (0, import_react.useState)(false); 12945 const { title, acceptButtonText, showCloseIcon } = getAiVoicesTermsCopy(variant, isTemplate); 12946 (0, import_react.useEffect)(() => { 12947 if (open) setHasAcceptedCheckbox(false); 12948 }, [open]); 12949 return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_material.Dialog, { 12950 open, 12951 maxWidth: "sm", 12952 fullWidth: true, 12953 onClose: onCancel, 12954 children: [ 12955 /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dist$3.TruffleDialogTitle, { 12956 multiline: true, 12957 CloseIconButtonProps: showCloseIcon ? { 12958 onClick: onCancel, 12959 "aria-label": "close", 12960 "data-tracking-id": AI_VOICES_TERMS_CANCEL_TRACKING_ID 12961 } : void 0, 12962 children: title 12963 }), 12964 /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.DialogContent, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_material.Box, { 12965 sx: { 12966 display: "flex", 12967 flexDirection: "column", 12968 gap: "10px" 12969 }, 12970 children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Box, { 12971 sx: termsBoxSxProps, 12972 children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AiVoicesTermsContent, {}) 12973 }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.FormControlLabel, { 12974 control: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Checkbox, { 12975 checked: hasAcceptedCheckbox, 12976 onChange: (event) => setHasAcceptedCheckbox(event.target.checked) 12977 }), 12978 label: "I have read and accept these terms" 12979 })] 12980 }) }), 12981 /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_material.DialogActions, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Button, { 12982 variant: "text", 12983 color: "primary", 12984 onClick: onCancel, 12985 "data-tracking-id": AI_VOICES_TERMS_CANCEL_TRACKING_ID, 12986 children: "Cancel" 12987 }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Button, { 12988 variant: "contained", 12989 color: "primary", 12990 disabled: !hasAcceptedCheckbox, 12991 onClick: onAccept, 12992 "data-tracking-id": AI_VOICES_TERMS_ACCEPT_TRACKING_ID, 12993 children: acceptButtonText 12994 })] }) 12995 ] 12996 }); 12997}; 12998//#endregion 12999//#region client/components/editor/Utils/mediaUtils.ts 13000var getVideoDuration = (url) => { 13001 const video = document.createElement("video"); 13002 const promise = new Promise((resolve, reject) => { 13003 video.onloadedmetadata = () => { 13004 const duration = video.duration; 13005 resolve({ duration }); 13006 }; 13007 video.onerror = reject; 13008 }); 13009 video.src = url; 13010 return promise; 13011}; 13012var getImageDimensions = async (url) => { 13013 return new Promise((resolve, reject) => { 13014 const img = new Image(); 13015 img.onload = () => { 13016 const width = img.naturalWidth; 13017 const height = img.naturalHeight; 13018 if (!(width > 0 && height > 0)) { 13019 reject(/* @__PURE__ */ new Error(`Failed to parse image from URL: ${url}`)); 13020 return; 13021 } 13022 resolve({ 13023 width, 13024 height 13025 }); 13026 }; 13027 img.onerror = () => { 13028 reject(/* @__PURE__ */ new Error(`Failed to load image from URL: ${url}`)); 13029 }; 13030 img.src = url; 13031 }); 13032}; 13033//#endregion 13034//#region client/components/newNav/components/recordingTool/recordingToolDialogConfig.ts 13035var RECORDINGS_FOLDER_NAME = "Recordings"; 13036var getDateForFileName = () => { 13037 return TimeUtils.getEditorReadableTimeDate(Date.now()); 13038}; 13039var getPermissionDeniedModalTitle = { 13040 "camera": "Camera is blocked", 13041 "microphone": "Microphone is blocked", 13042 "cameraAndMicrophone": "Camera and microphone are blocked" 13043}; 13044var getPermissionDeniedModalDescription = { 13045 "camera": "Change the camera permissions in the site settings.", 13046 "microphone": "Change the microphone permissions in the site settings.", 13047 "cameraAndMicrophone": "Change the camera and microphone permissions in the site settings." 13048}; 13049//#endregion 13050//#region client/components/newNav/components/recordingTool/PermissionDeniedModal.tsx 13051var recordingGif = new URL("/client/images/recording-turn-on-permission.CutkYv7o.gif", "" + import.meta.url).href; 13052var PermissionDeniedModal = ({ permissionDenied, onClose }) => { 13053 return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_material.Dialog, { 13054 open: true, 13055 onClose, 13056 fullWidth: true, 13057 PaperProps: { sx: { width: "446px" } }, 13058 children: [
13059 /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dist$3.TruffleDialogTitle, { 13060 CloseIconButtonProps: { onClick: onClose }, 13061 HelpCenterIconButtonProps: { onClick: (event) => { 13062 openArticleInHelpCenter({ 13063 buttonId: "7473e39a-315c-4442-a2c2-a85c1fb866a9", 13064 anchorRef: event.currentTarget, 13065 trackingSource: InAppHelpCenterTrackingSource.Editor, 13066 trackingDialogName: "tracking-id-recorder-permissions-error-dialog" 13067 }); 13068 } } 13069 }), 13070 /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_material.DialogContent, { 13071 sx: DialogContentSxProps, 13072 children: [ 13073 /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Box, { 13074 component: "img", 13075 src: recordingGif, 13076 "aria-label": "recording-turn-on-permission", 13077 sx: { width: "380px" } 13078 }), 13079 /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Typography, { 13080 variant: "h3", 13081 children: getPermissionDeniedModalTitle[permissionDenied] 13082 }), 13083 /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Typography, { 13084 align: "center", 13085 sx: { whiteSpace: "pre-line" }, 13086 variant: "body1", 13087 children: getPermissionDeniedModalDescription[permissionDenied] 13088 }) 13089 ] 13090 }), 13091 /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.DialogActions, { 13092 sx: { 13093 margin: "auto", 13094 marginBottom: "16px" 13095 }, 13096 children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Button, { 13097 variant: "contained", 13098 onClick: onClose, 13099 children: "Got it" 13100 }) 13101 }) 13102 ] 13103 }); 13104}; 13105var DialogContentSxProps = { 13106 display: "flex", 13107 flexDirection: "column", 13108 gap: "8px", 13109 alignItems: "center", 13110 justifyContent: "center" 13111}; 13112//#endregion 13113//#region node_modules/@rive-app/react-canvas/dist/index.js 13114var require_dist = /* @__PURE__ */ __commonJSMin(((exports) => { 13115 Object.defineProperty(exports, "__esModule", { value: !0 }); 13116 var e = require_react(); 13117 var t = require_rive(); 13118 function n(e) { 13119 return e && "object" == typeof e && "default" in e ? e : { default: e }; 13120 } 13121 var i = /*#__PURE__*/ n(e); 13122 var r = function() { 13123 return r = Object.assign || function(e) { 13124 for (var t, n = 1, i = arguments.length; n < i; n++) for (var r in t = arguments[n]) Object.prototype.hasOwnProperty.call(t, r) && (e[r] = t[r]); 13125 return e; 13126 }, r.apply(this, arguments); 13127 }; 13128 function o(e, t) { 13129 var n = {}; 13130 for (var i in e) Object.prototype.hasOwnProperty.call(e, i) && t.indexOf(i) < 0 && (n[i] = e[i]); 13131 if (null != e && "function" == typeof Object.getOwnPropertySymbols) { 13132 var r = 0; 13133 for (i = Object.getOwnPropertySymbols(e); r < i.length; r++) t.indexOf(i[r]) < 0 && Object.prototype.propertyIsEnumerable.call(e, i[r]) && (n[i[r]] = e[i[r]]); 13134 } 13135 return n; 13136 } 13137 function a(e, t, n, i) { 13138 return new (n || (n = Promise))(function(r, o) { 13139 function a(e) { 13140 try { 13141 s(i.next(e)); 13142 } catch (e) { 13143 o(e); 13144 } 13145 } 13146 function u(e) { 13147 try { 13148 s(i.throw(e)); 13149 } catch (e) { 13150 o(e); 13151 } 13152 } 13153 function s(e) { 13154 var t; 13155 e.done ? r(e.value) : (t = e.value, t instanceof n ? t : new n(function(e) { 13156 e(t); 13157 })).then(a, u); 13158 } 13159 s((i = i.apply(e, t || [])).next()); 13160 }); 13161 } 13162 function u(e, t) { 13163 var n, i, r, o = { 13164 label: 0, 13165 sent: function() { 13166 if (1 & r[0]) throw r[1]; 13167 return r[1]; 13168 }, 13169 trys: [], 13170 ops: [] 13171 }, a = Object.create(("function" == typeof Iterator ? Iterator : Object).prototype); 13172 return a.next = u(0), a.throw = u(1), a.return = u(2), "function" == typeof Symbol && (a[Symbol.iterator] = function() { 13173 return this; 13174 }), a; 13175 function u(u) { 13176 return function(s) { 13177 return function(u) { 13178 if (n) throw new TypeError("Generator is already executing."); 13179 for (; a && (a = 0, u[0] && (o = 0)), o;) try { 13180 if (n = 1, i && (r = 2 & u[0] ? i.return : u[0] ? i.throw || ((r = i.return) && r.call(i), 0) : i.next) && !(r = r.call(i, u[1])).done) return r; 13181 switch (i = 0, r && (u = [2 & u[0], r.value]), u[0]) { 13182 case 0: 13183 case 1: 13184 r = u; 13185 break; 13186 case 4: return o.label++, { 13187 value: u[1], 13188 done: !1 13189 }; 13190 case 5: 13191 o.label++, i = u[1], u = [0]; 13192 continue; 13193 case 7: 13194 u = o.ops.pop(), o.trys.pop(); 13195 continue; 13196 default: 13197 if (!(r = o.trys, (r = r.length > 0 && r[r.length - 1]) || 6 !== u[0] && 2 !== u[0])) { 13198 o = 0; 13199 continue; 13200 } 13201 if (3 === u[0] && (!r || u[1] > r[0] && u[1] < r[3])) { 13202 o.label = u[1]; 13203 break; 13204 } 13205 if (6 === u[0] && o.label < r[1]) { 13206 o.label = r[1], r = u; 13207 break; 13208 } 13209 if (r && o.label < r[2]) { 13210 o.label = r[2], o.ops.push(u); 13211 break; 13212 } 13213 r[2] && o.ops.pop(), o.trys.pop(); 13214 continue; 13215 } 13216 u = t.call(e, o); 13217 } catch (e) { 13218 u = [6, e], i = 0; 13219 } finally { 13220 n = r = 0; 13221 } 13222 if (5 & u[0]) throw u[1]; 13223 return { 13224 value: u[0] ? u[1] : void 0, 13225 done: !0 13226 }; 13227 }([u, s]); 13228 }; 13229 } 13230 } 13231 function s(t) { 13232 var n = t || c(), i = e.useState(n), r = i[0], o = i[1]; 13233 return e.useEffect(function() {
13234 if ("undefined" != typeof window && "matchMedia" in window) { 13235 var e = function() { 13236 o(t || c()); 13237 }, n = window.matchMedia("screen and (resolution: ".concat(r, "dppx)")); 13238 return n.hasOwnProperty("addEventListener") ? n.addEventListener("change", e) : n.addListener(e), function() { 13239 n.hasOwnProperty("removeEventListener") ? n.removeEventListener("change", e) : n.removeListener(e); 13240 }; 13241 } 13242 }, [r, t]), r; 13243 } 13244 function c() { 13245 var e = "undefined" != typeof window && "number" == typeof window.devicePixelRatio ? window.devicePixelRatio : 1; 13246 return Math.min(Math.max(1, e), 3); 13247 } 13248 var l = function() { 13249 function e() {} 13250 return e.prototype.observe = function() {}, e.prototype.unobserve = function() {}, e.prototype.disconnect = function() {}, e; 13251 }(); 13252 var f = globalThis.ResizeObserver || l; 13253 var d = void 0 !== globalThis.ResizeObserver; 13254 var v = !d; 13255 function h(t, n) { 13256 void 0 === n && (n = !0); 13257 var i = e.useState({ 13258 width: 0, 13259 height: 0 13260 }), r = i[0], o = i[1]; 13261 e.useEffect(function() { 13262 if ("undefined" != typeof window && n) { 13263 var e = function() { 13264 o({ 13265 width: window.innerWidth, 13266 height: window.innerHeight 13267 }); 13268 }; 13269 return v && (e(), window.addEventListener("resize", e)), function() { 13270 return window.removeEventListener("resize", e); 13271 }; 13272 } 13273 }, []); 13274 var a, u, s, c = e.useRef(new f((a = function(e) { 13275 d && o({ 13276 width: e[e.length - 1].contentRect.width, 13277 height: e[e.length - 1].contentRect.height 13278 }); 13279 }, u = 0, s = 0, function() { 13280 for (var e = this, t = [], n = 0; n < arguments.length; n++) t[n] = arguments[n]; 13281 clearTimeout(s), s = window.setTimeout(function() { 13282 return a.apply(e, t); 13283 }, u); 13284 }))); 13285 return e.useEffect(function() { 13286 var e = c.current; 13287 if (n) { 13288 var i = t.current; 13289 return t.current && d && e.observe(t.current), function() { 13290 e.disconnect(), i && d && e.unobserve(i); 13291 }; 13292 } 13293 e.disconnect(); 13294 }, [t, c]), r; 13295 } 13296 var p = { 13297 useDevicePixelRatio: !0, 13298 fitCanvasToArtboardHeight: !1, 13299 useOffscreenRenderer: !0, 13300 shouldResizeCanvasToContainer: !0 13301 }; 13302 function b(e) { 13303 return Object.assign({}, p, e); 13304 } 13305 function w(t) { 13306 var n = t.riveLoaded, i = void 0 !== n && n, r = t.canvasElem, o = t.containerRef, a = t.options, u = void 0 === a ? {} : a, c = t.onCanvasHasResized, l = t.artboardBounds, f = b(u), d = e.useState({ 13307 height: 0, 13308 width: 0 13309 }), v = d[0], p = v.height, w = v.width, y = d[1], g = e.useState({ 13310 height: 0, 13311 width: 0 13312 }), m = g[0], R = m.height, C = m.width, E = g[1], O = e.useState(!0), x = O[0], T = O[1], P = f.fitCanvasToArtboardHeight, L = f.shouldResizeCanvasToContainer, S = f.useDevicePixelRatio, k = f.customDevicePixelRatio, M = h(o, L), j = s(k), z = null != l ? l : {}, H = z.maxX, I = z.maxY, D = e.useCallback(function() { 13313 var e, t, n, i, r = null !== (t = null === (e = o.current) || void 0 === e ? void 0 : e.clientWidth) && void 0 !== t ? t : 0, a = null !== (i = null === (n = o.current) || void 0 === n ? void 0 : n.clientHeight) && void 0 !== i ? i : 0; 13314 return P && l ? { 13315 width: r, 13316 height: r * (l.maxY / l.maxX) 13317 } : { 13318 width: r, 13319 height: a 13320 }; 13321 }, [ 13322 o, 13323 P, 13324 H, 13325 I 13326 ]); 13327 e.useEffect(function() { 13328 if (L && o.current && i) { 13329 var e = D(), t = e.width, n = e.height, a = !1; 13330 if (r) { 13331 var u = t !== w || n !== p; 13332 if (f.fitCanvasToArtboardHeight && u && (o.current.style.height = n + "px", a = !0), f.useDevicePixelRatio) { 13333 if (u || t * j !== C || n * j !== R) { 13334 var s = j * t, l = j * n; 13335 r.width = s, r.height = l, r.style.width = t + "px", r.style.height = n + "px", E({ 13336 width: s, 13337 height: l 13338 }), a = !0; 13339 } 13340 } else u && (r.width = t, r.height = n, E({ 13341 width: t, 13342 height: n 13343 }), a = !0); 13344 y({ 13345 width: t, 13346 height: n 13347 }); 13348 } 13349 c && (x || a) && c && c(), x && T(!1); 13350 } 13351 }, [ 13352 r, 13353 o, 13354 M, 13355 j, 13356 D, 13357 x, 13358 T, 13359 R, 13360 C, 13361 p, 13362 w, 13363 c, 13364 L, 13365 P, 13366 S, 13367 i 13368 ]), e.useEffect(function() { 13369 E({ 13370 width: 0, 13371 height: 0 13372 }); 13373 }, [r]); 13374 } 13375 var y; 13376 var g = function() { 13377 function e() {} 13378 return e.prototype.observe = function() {}, e.prototype.unobserve = function() {}, e.prototype.disconnect = function() {}, e; 13379 }(); 13380 var m = globalThis.IntersectionObserver || g; 13381 var R = function() { 13382 function e() { 13383 var e = this; 13384 this.elementsMap = /* @__PURE__ */ new Map(), this.onObserved = function(t) { 13385 t.forEach(function(t) { 13386 var n = e.elementsMap.get(t.target); 13387 n && n(t); 13388 }); 13389 }, this.observer = new m(this.onObserved); 13390 } 13391 return e.prototype.registerCallback = function(e, t) { 13392 this.observer.observe(e), this.elementsMap.set(e, t); 13393 }, e.prototype.removeCallback = function(e) { 13394 this.observer.unobserve(e), this.elementsMap.delete(e); 13395 }, e; 13396 }();
13397 var C = function() { 13398 return y || (y = new R()), y; 13399 }; 13400 function E(e) { 13401 var t = e.setContainerRef, n = e.setCanvasRef, a = e.className, u = void 0 === a ? "" : a, s = e.style, c = e.children, l = o(e, [ 13402 "setContainerRef", 13403 "setCanvasRef", 13404 "className", 13405 "style", 13406 "children" 13407 ]), f = r({ 13408 width: "100%", 13409 height: "100%" 13410 }, s); 13411 return i.default.createElement("div", r({ 13412 ref: t, 13413 className: u 13414 }, !u && { style: f }), i.default.createElement("canvas", r({ 13415 ref: n, 13416 style: { 13417 verticalAlign: "top", 13418 width: 0, 13419 height: 0 13420 } 13421 }, l), c)); 13422 } 13423 function O(n, o) { 13424 void 0 === o && (o = {}); 13425 var a = e.useState(null), u = a[0], c = a[1], l = e.useRef(null), f = e.useState(null), d = f[0], v = f[1], h = Boolean(n), p = b(o), y = s(), g = e.useCallback(function() { 13426 if (d) { 13427 if (d.layout && d.layout.fit === t.Fit.Layout && u) { 13428 var e = y * d.layout.layoutScaleFactor; 13429 d.devicePixelRatioUsed = y, d.artboardWidth = (null == u ? void 0 : u.width) / e, d.artboardHeight = (null == u ? void 0 : u.height) / e; 13430 } 13431 d.startRendering(), d.resizeToCanvas(); 13432 } 13433 }, [d, y]); 13434 w({ 13435 riveLoaded: !!d, 13436 canvasElem: u, 13437 containerRef: l, 13438 options: p, 13439 onCanvasHasResized: g, 13440 artboardBounds: null == d ? void 0 : d.bounds 13441 }); 13442 var m = e.useCallback(function(e) { 13443 null === e && u && (u.height = 0, u.width = 0), c(e); 13444 }, []); 13445 e.useEffect(function() { 13446 if (u && n && null == d) { 13447 var e = p.useOffscreenRenderer, i = new t.Rive(r(r({ useOffscreenRenderer: e }, n), { canvas: u })); 13448 i.on(t.EventType.Load, function() { 13449 u ? v(i) : i.cleanup(); 13450 }); 13451 } 13452 }, [ 13453 u, 13454 h, 13455 d 13456 ]); 13457 var R = e.useCallback(function(e) { 13458 l.current = e; 13459 }, []), O = { 13460 observe: e.useCallback(function(e, t) { 13461 C().registerCallback(e, t); 13462 }, []), 13463 unobserve: e.useCallback(function(e) { 13464 C().removeCallback(e); 13465 }, []) 13466 }, x = O.observe, T = O.unobserve; 13467 e.useEffect(function() { 13468 var e, t = !1, n = function() { 13469 if (u && t) { 13470 var e = u.getBoundingClientRect(); 13471 e.width > 0 && e.height > 0 && e.top < (window.innerHeight || document.documentElement.clientHeight) && e.bottom > 0 && e.left < (window.innerWidth || document.documentElement.clientWidth) && e.right > 0 && (d?.startRendering(), t = !1); 13472 } 13473 }; 13474 return u && !1 !== p.shouldUseIntersectionObserver && x(u, function(i) { 13475 i.isIntersecting ? d && d.startRendering() : d && d.stopRendering(), t = !i.isIntersecting, clearTimeout(e), i.isIntersecting || 0 !== i.boundingClientRect.width || (e = setTimeout(n, 10)); 13476 }), function() { 13477 u && T(u); 13478 }; 13479 }, [ 13480 x, 13481 T, 13482 d, 13483 u, 13484 p.shouldUseIntersectionObserver 13485 ]), e.useEffect(function() { 13486 return function() { 13487 d && (d.cleanup(), v(null)); 13488 }; 13489 }, [d, u]); 13490 var P = null == n ? void 0 : n.animations; 13491 e.useEffect(function() { 13492 d && P && (d.isPlaying ? (d.stop(d.animationNames), d.play(P)) : d.isPaused && (d.stop(d.animationNames), d.pause(P))); 13493 }, [P, d]); 13494 var L = e.useCallback(function(e) { 13495 return i.default.createElement(E, r({ 13496 setContainerRef: R, 13497 setCanvasRef: m 13498 }, e)); 13499 }, [m, R]); 13500 return { 13501 canvas: u, 13502 container: l.current, 13503 setCanvasRef: m, 13504 setContainerRef: R, 13505 rive: d, 13506 RiveComponent: L 13507 }; 13508 } 13509 exports.default = function(e) { 13510 var t = e.src, n = e.artboard, a = e.animations, u = e.stateMachines, s = e.layout, c = e.useOffscreenRenderer, l = void 0 === c || c, f = e.shouldDisableRiveListeners, d = void 0 !== f && f, v = e.shouldResizeCanvasToContainer, h = void 0 === v || v, p = e.automaticallyHandleEvents, b = void 0 !== p && p, w = e.children, y = o(e, [ 13511 "src", 13512 "artboard", 13513 "animations", 13514 "stateMachines", 13515 "layout", 13516 "useOffscreenRenderer", 13517 "shouldDisableRiveListeners", 13518 "shouldResizeCanvasToContainer", 13519 "automaticallyHandleEvents", 13520 "children" 13521 ]), g = O({ 13522 src: t, 13523 artboard: n, 13524 animations: a, 13525 layout: s, 13526 stateMachines: u, 13527 autoplay: !0, 13528 shouldDisableRiveListeners: d, 13529 automaticallyHandleEvents: b 13530 }, { 13531 useOffscreenRenderer: l, 13532 shouldResizeCanvasToContainer: h 13533 }).RiveComponent; 13534 return i.default.createElement(g, r({}, y), w); 13535 }, exports.useResizeCanvas = w, exports.useRive = O, exports.useRiveFile = function(n) { 13536 var i = this, r = e.useState(null), o = r[0], s = r[1], c = e.useState("idle"), l = c[0], f = c[1]; 13537 return e.useEffect(function() { 13538 var e = null; 13539 return a(i, void 0, void 0, function() { 13540 return u(this, function(i) { 13541 try { 13542 f("loading"), (e = new t.RiveFile(n)).init(), e.on(t.EventType.Load, function() { 13543 e?.getInstance(), s(e), f("success"); 13544 }), e.on(t.EventType.LoadError, function() { 13545 f("failed"); 13546 }), s(e); 13547 } catch (e) { 13548 console.error(e), f("failed"); 13549 } 13550 return [2]; 13551 }); 13552 }), function() { 13553 e?.cleanup(); 13554 }; 13555 }, [n.src, n.buffer]), { 13556 riveFile: o, 13557 status: l 13558 }; 13559 }, exports.useStateMachineInput = function(n, i, r, o) { 13560 var a = e.useState(null), u = a[0], s = a[1]; 13561 return e.useEffect(function() { 13562 function e() { 13563 if (n && i && r || s(null), n && i && r) { 13564 var e = n.stateMachineInputs(i); 13565 if (e) { 13566 var t = e.find(function(e) { 13567 return e.name === r; 13568 }); 13569 void 0 !== o && t && (t.value = o), s(t || null); 13570 } 13571 } else s(null); 13572 } 13573 e(), n && n.on(t.EventType.Load, function() { 13574 e(); 13575 }); 13576 }, [n]), u; 13577 }, Object.keys(t).forEach(function(e) { 13578 "default" === e || exports.hasOwnProperty(e) || Object.defineProperty(exports, e, { 13579 enumerable: !0, 13580 get: function() { 13581 return t[e]; 13582 } 13583 }); 13584 }); 13585})); 13586//#endregion 13587//#region client/components/newNav/components/recordingTool/pipWindow/pipStyles.ts 13588var ELEMENT_IDS = { 13589 RECORD_LABEL: "record-label", 13590 MIC_VISUALIZER: "mic-visualizer", 13591 CANVAS_CONTAINER: "canvas-container", 13592 SETTINGS_WRAPPER: "settings-wrapper", 13593 MIC_WRAPPER: "mic-wrapper", 13594 COUNTDOWN_ANIMATION: "countdown_animation", 13595 TIMER_LABEL: "timer-label", 13596 PIP_WRAPPER: "pip-wrapper", 13597 BOTTOM_CONTAINER: "bottom-container", 13598 CONTROL_BAR: "control-bar", 13599 TIME_LIMIT_SCREEN: "time-limit-screen", 13600 SETTINGS_SCREEN: "settings-screen", 13601 SETTINGS_IMAGE: "settings-image", 13602 RETAKE_DIALOG: "retake-dialog" 13603}; 13604var PRIMARY_COLOR = "#0053E5"; 13605var pipStyles = { 13606 global: ` 13607 *, *::before, *::after { 13608 box-sizing: border-box; 13609 } 13610 * { 13611 margin: 0; 13612 } 13613 body { 13614 margin: 0; 13615 height: 100vh; 13616 width: 100vw; 13617 position: relative; 13618 font-family: sans-serif; 13619 } 13620 `, 13621 screenWrapper: ` 13622 height: 100%; 13623 width: 100%; 13624 display: flex; 13625 flex-direction: column; 13626 justify-content: space-between; 13627 align-items: center; 13628 background-clip: content-box; 13629 background-color: rgba(50, 50, 50, 1); 13630 `, 13631 cameraWrapper: ` 13632 position: relative; 13633 height: 100%; 13634 `, 13635 video: ` 13636 position: absolute; 13637 top: 0; 13638 left: 0; 13639 width: 100%; 13640 height: 100%; 13641 object-fit: cover; 13642 `, 13643 bottomContainer: ` 13644 position: absolute; 13645 bottom: 0; 13646 left: 0px; 13647 right: 0px; 13648 `, 13649 controlBar: ` 13650 display: flex; 13651 justify-content: space-between; 13652 align-items: center; 13653 padding: 0 16px; 13654 `, 13655 settingsButton: ` 13656 width: 36px; 13657 height: 36px; 13658 padding: 16px; 13659 display: flex; 13660 justify-content: center; 13661 align-items: center; 13662 background: none; 13663 border: none; 13664 cursor: pointer; 13665 position: relative; 13666 `, 13667 canvasContainer: ` 13668 display: flex; 13669 flex-direction: column; 13670 justify-content: center; 13671 align-items: center; 13672 height: 100%; 13673 `, 13674 recordLabel: ` 13675 width: 100%; 13676 display: block; 13677 text-align: center; 13678 color: white; 13679 font-size: 14px; 13680 font-style: normal; 13681 font-weight: 500; 13682 line-height: 175%; 13683 letter-spacing: 0.15px; 13684 text-shadow: 0 0 5px rgba(0, 0, 0, 0.95); 13685 margin-bottom: -10px; 13686 `, 13687 canvas: ` 13688 height: 100px; 13689 `, 13690 micContainer: ` 13691 width: 36px; 13692 height: 36px; 13693 display: flex; 13694 align-items: center; 13695 justify-content: center; 13696 `, 13697 countdownWrapper: ` 13698 position: absolute; 13699 background-color: rgba(0, 0, 0, 0.5); 13700 inset: 0; 13701 display: flex; 13702 justify-content: center; 13703 align-items: center; 13704 overflow: hidden; 13705 `, 13706 micVisualizer: ` 13707 display: flex; 13708 justify-content: center; 13709 align-items: center; 13710 gap: 3px; 13711 height: 36px; 13712 width: 36px; 13713 `, 13714 popoverText: ` 13715 color: white; 13716 `, 13717 timesUpScreenWrapper: ` 13718 position: absolute; 13719 top: 0; 13720 left: 0; 13721 height: 100%; 13722 width: 100%; 13723 display: flex; 13724 justify-content: center; 13725 align-items: center; 13726 background-clip: content-box; 13727 background-color: rgba(50, 50, 50, 1); 13728 `, 13729 timesUpContainer: ` 13730 display: flex; 13731 flex-direction: column; 13732 align-items: center; 13733 gap: 8px; 13734 `, 13735 saveButton: ` 13736 height: 24px; 13737 border-radius: 12px; 13738 background-color: #4CAF50; 13739 color: white; 13740 border: none; 13741 cursor: pointer; 13742 padding: 0 8px; 13743 font-weight: 600; 13744 `, 13745 applyButton: ` 13746 height: 32px; 13747 border-radius: 16px; 13748 background-color: ${PRIMARY_COLOR}; 13749 color: white; 13750 border: none; 13751 cursor: pointer; 13752 padding: 0 15px; 13753 font-weight: 600; 13754 `, 13755 reRecordButton: ` 13756 display: flex; 13757 height: 24px; 13758 align-items: center; 13759 justify-content: center; 13760 border-radius: 12px; 13761 background-color: white; 13762 color: ${PRIMARY_COLOR}; 13763 border: none; 13764 cursor: pointer; 13765 padding: 0 8px; 13766 font-weight: 600; 13767 `, 13768 settingsScreen: ` 13769 position: absolute; 13770 display: none; 13771 justify-content: center; 13772 align-items: center; 13773 top: 0; 13774 left: 0; 13775 width: 100%; 13776 height: 100%; 13777 background-color: #323232; 13778 z-index: 5; 13779 `, 13780 exitButton: ` 13781 position: absolute; 13782 top: -11px; 13783 right: -30px; 13784 background: none; 13785 border: none; 13786 width: 32px; 13787 height: 32px; 13788 `, 13789 selectContainer: ` 13790 display: flex; 13791 flex-direction: column; 13792 justify-content: flex-start; 13793 gap: 8px; 13794 width: 100%; 13795 `, 13796 select: ` 13797 background: #494949; 13798 color: white; 13799 border-radius: 8px; 13800 padding: 8px; 13801 border: none; 13802 cursor: pointer; 13803 border-right: 14px solid transparent; 13804 height: 40px; 13805 font-size: 12px; 13806 `, 13807 selectLabel: ` 13808 color: white; 13809 font-family: sans-serif; 13810 font-size: 12px; 13811 `, 13812 settingsContent: ` 13813 position: relative; 13814 display: flex; 13815 flex-direction: column; 13816 justify-content: center; 13817 align-items: center; 13818 gap: 16px; 13819 max-width: 300px; 13820 `, 13821 retakeDialogWrapper: ` 13822 position: absolute; 13823 display: flex; 13824 justify-content: center; 13825 align-items: center; 13826 top: 0; 13827 left: 0; 13828 width: 100%; 13829 height: 100%; 13830 background-color: rgba(0, 0, 0, 0.50); 13831 z-index: 5; 13832 `, 13833 retakeDialog: ` 13834 display: flex; 13835 flex-direction: column; 13836 justify-content: center; 13837 align-items: center; 13838 background-color: white; 13839 padding: 0 16px; 13840 border-radius: 8px; 13841 max-width: 300px; 13842 `, 13843 retakeDialogTitleWrapper: ` 13844 display: flex; 13845 justify-content: space-between; 13846 align-items: center; 13847 padding: 10px 0; 13848 width: 100%; 13849 `, 13850 retakeDialogTitle: ` 13851 font-size: 18px; 13852 font-weight: 400; 13853 `, 13854 retakeDialogCloseButtonWrapper: ` 13855 cursor: pointer; 13856 width: 32px; 13857 height: 32px; 13858 padding: 8px; 13859 `, 13860 retakeDialogCloseButton: ` 13861 width: 10px; 13862 height: 16px; 13863 `, 13864 retakeDialogContent: ` 13865 display: inline; 13866 font-size: 14px; 13867 `, 13868 dialogActionsWrapper: ` 13869 display: flex; 13870 justify-content: flex-end; 13871 gap: 8px; 13872 width: 100%; 13873 padding: 8px 0; 13874 `, 13875 retakeDialogCancelButton: ` 13876 background-color: white; 13877 color: ${PRIMARY_COLOR}; 13878 border: none; 13879 border-radius: 18px; 13880 padding: 6px 16px; 13881 cursor: pointer; 13882 font-size: 14px; 13883 `, 13884 retakeDialogRetakeButton: ` 13885 background-color: ${PRIMARY_COLOR}; 13886 color: white; 13887 border: none; 13888 border-radius: 18px; 13889 padding: 6px 16px; 13890 cursor: pointer; 13891 font-size: 14px; 13892 `, 13893 noCameraAvailableContent: ` 13894 display: flex; 13895 flex-direction: column; 13896 align-items: center; 13897 gap: 16px; 13898 `, 13899 noCameraAvailableTitleContainer: ` 13900 display: flex; 13901 flex-direction: column; 13902 justify-content: center; 13903 align-items: center; 13904 gap: 8px; 13905 max-width: 325px; 13906 `, 13907 noAvailableCameraCloseButton: ` 13908 height: 24px; 13909 width: 52px; 13910 border-radius: 12px; 13911 background-color: ${PRIMARY_COLOR}; 13912 color: white; 13913 border: none; 13914 cursor: pointer; 13915 font-weight: 400; 13916 `, 13917 noAvailableCameraTitle: ` 13918 width: 100%; 13919 display: block; 13920 text-align: center; 13921 color: white; 13922 font-size: 18px; 13923 font-style: normal; 13924 font-weight: 400; 13925 line-height: 175%; 13926 letter-spacing: 0.15px; 13927 text-shadow: 0 0 5px rgba(0, 0, 0, 0.95); 13928 ` 13929}; 13930//#endregion 13931//#region client/components/newNav/components/recordingTool/pipWindow/volumeBar.ts 13932var barStyle = ` 13933 width: 3px; 13934 height: 4px; 13935 background-color: white; 13936 transition: height 0.1s ease-in-out; 13937 border-radius: 16px; 13938 box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.95); 13939`; 13940var startMicVisualizer = (stream, pipWindow) => { 13941 const doc = pipWindow.document; 13942 const audioContext = new AudioContext(); 13943 const analyser = audioContext.createAnalyser(); 13944 const microphone = audioContext.createMediaStreamSource(stream); 13945 const dataArray = new Uint8Array(analyser.frequencyBinCount); 13946 analyser.fftSize = 32; 13947 microphone.connect(analyser); 13948 const micVisualizer = doc.getElementById(ELEMENT_IDS.MIC_VISUALIZER); 13949 if (!micVisualizer) return; 13950 const numBars = 6; 13951 micVisualizer.innerHTML = ""; 13952 const bars = []; 13953 const defaultHeights = [ 13954 8, 13955 8, 13956 6, 13957 6, 13958 4, 13959 4 13960 ]; 13961 for (let i = 0; i < numBars / 2; i++) { 13962 const rightBar = doc.createElement("div"); 13963 rightBar.style.cssText = barStyle; 13964 rightBar.style.height = `${defaultHeights[i * 2]}px`; 13965 micVisualizer.appendChild(rightBar); 13966 const leftBar = doc.createElement("div"); 13967 leftBar.style.cssText = barStyle; 13968 leftBar.style.height = `${defaultHeights[i * 2 + 1]}px`; 13969 micVisualizer.insertBefore(leftBar, micVisualizer.firstChild); 13970 bars.push(rightBar); 13971 bars.unshift(leftBar); 13972 } 13973 function updateBars() { 13974 analyser.getByteFrequencyData(dataArray); 13975 for (let i = 0; i < numBars / 2; i++) {
13976 const volume = dataArray[i] / 255; 13977 const height = Math.max(4, Math.floor(volume * 20)); 13978 const middleIndex = Math.floor(numBars / 2) - 1; 13979 bars[middleIndex - i].style.height = `${height}px`; 13980 bars[3 + i].style.height = `${height}px`; 13981 } 13982 requestAnimationFrame(updateBars); 13983 } 13984 updateBars(); 13985}; 13986//#endregion 13987//#region client/components/newNav/components/recordingTool/pipWindow/pipWindow.ts 13988var settingsSvg = new URL("data:image/svg+xml,%3csvg%20width='30'%20height='31'%20viewBox='0%200%2030%2031'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cg%20filter='url(%23filter0_d_17618_19546)'%3e%3cpath%20d='M24.6875%2017.8438C24.6875%2018.8984%2022.6562%2022.8828%2021.3281%2022.8828C21.1719%2022.8828%2021.0156%2022.8438%2020.8594%2022.7266L19.5703%2021.9844C19.1406%2022.2969%2018.7109%2022.5703%2018.2422%2022.7656V24.25C18.2422%2024.6797%2017.9688%2025.0703%2017.5391%2025.1875C16.6797%2025.4219%2015.8203%2025.5%2014.9609%2025.5C14.1016%2025.5%2013.2422%2025.4219%2012.3828%2025.1484C11.9922%2025.0312%2011.6797%2024.6406%2011.6797%2024.2109V22.7266C11.2109%2022.5312%2010.7812%2022.2578%2010.3516%2021.9453L9.0625%2022.6875C8.90625%2022.8047%208.75%2022.8438%208.59375%2022.8438C7.22656%2022.8438%205.27344%2018.6641%205.27344%2017.8438C5.27344%2017.5312%205.46875%2017.2188%205.78125%2017.0234L7.07031%2016.2812C7.03125%2016.0469%207.03125%2015.7734%207.03125%2015.5C7.03125%2015.2656%207.03125%2014.9922%207.07031%2014.7578L5.78125%2014.0156C5.46875%2013.8203%205.27344%2013.5078%205.27344%2013.1953C5.27344%2012.1406%207.30469%208.15625%208.59375%208.15625C8.75%208.15625%208.90625%208.19531%209.0625%208.3125L10.3516%209.05469C10.7812%208.74219%2011.2109%208.46875%2011.6797%208.27344V6.78906C11.6797%206.35938%2011.9922%205.96875%2012.3828%205.85156C13.2422%205.61719%2014.1016%205.5%2015%205.5C15.8594%205.5%2016.7188%205.61719%2017.5781%205.85156C17.9688%205.96875%2018.2812%206.35938%2018.2812%206.78906V8.27344C18.75%208.46875%2019.1797%208.74219%2019.6094%209.05469L20.8984%208.3125C21.0547%208.19531%2021.2109%208.15625%2021.3672%208.15625C22.7344%208.15625%2024.6875%2012.3359%2024.6875%2013.1953C24.6875%2013.5078%2024.4922%2013.8203%2024.1797%2014.0156L22.8906%2014.7578C22.9297%2014.9922%2022.9297%2015.2656%2022.9297%2015.5C22.9297%2015.7734%2022.9297%2016.0469%2022.8906%2016.2422L24.1797%2016.9844C24.4922%2017.1797%2024.6875%2017.4922%2024.6875%2017.8438ZM21.2109%2020.7344C21.7969%2020.0312%2022.3047%2019.1719%2022.6172%2018.2734L20.9375%2017.2969C21.0156%2016.3203%2021.0547%2015.8906%2021.0547%2015.5C21.0547%2015.1094%2021.0156%2014.7188%2020.9375%2013.7422L22.6172%2012.7656C22.3047%2011.8672%2021.7969%2011.0078%2021.2109%2010.3047L19.4922%2011.2812C17.8516%2010.0703%2018.2422%2010.3047%2016.4062%209.48438V7.53125C16.0547%207.45312%2015.5859%207.375%2015%207.375C14.5703%207.375%2014.0625%207.41406%2013.5547%207.53125V9.48438C11.7188%2010.3047%2012.1094%2010.0703%2010.4688%2011.2812L8.75%2010.2656C8.16406%2011.0078%207.65625%2011.8672%207.34375%2012.7656L9.02344%2013.7422C8.94531%2014.7188%208.90625%2015.1094%208.90625%2015.5C8.90625%2015.9297%208.94531%2016.3203%209.02344%2017.2969L7.34375%2018.2344C7.65625%2019.1719%208.16406%2019.9922%208.75%2020.7344L10.4688%2019.7188C12.1094%2020.9297%2011.7188%2020.6953%2013.5547%2021.5156V23.4688C13.8672%2023.5469%2014.375%2023.625%2014.9609%2023.625C15.3906%2023.625%2015.8984%2023.5859%2016.4062%2023.4688V21.5156C18.2422%2020.6953%2017.8516%2020.9297%2019.4922%2019.7188L21.2109%2020.7344ZM15%2011.75C17.0312%2011.75%2018.75%2013.4297%2018.75%2015.5C18.75%2017.5312%2017.0312%2019.25%2015%2019.25C12.9297%2019.25%2011.25%2017.5312%2011.25%2015.5C11.25%2013.4297%2012.9297%2011.75%2015%2011.75ZM15%2017.375C16.0156%2017.375%2016.875%2016.5547%2016.875%2015.5C16.875%2014.4844%2016.0156%2013.625%2015%2013.625C13.9453%2013.625%2013.125%2014.4844%2013.125%2015.5C13.125%2016.5547%2013.9453%2017.375%2015%2017.375Z'%20fill='white'/%3e%3c/g%3e%3cdefs%3e%3cfilter%20id='filter0_d_17618_19546'%20x='0.273438'%20y='0.5'%20width='29.4141'%20height='30'%20filterUnits='userSpaceOnUse'%20color-interpolation-filters='sRGB'%3e%3cfeFlood%20flood-opacity='0'%20result='Backgroun
13988dImageFix'/%3e%3cfeColorMatrix%20in='SourceAlpha'%20type='matrix'%20values='0%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%20127%200'%20result='hardAlpha'/%3e%3cfeOffset/%3e%3cfeGaussianBlur%20stdDeviation='2.5'/%3e%3cfeComposite%20in2='hardAlpha'%20operator='out'/%3e%3cfeColorMatrix%20type='matrix'%20values='0%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200.95%200'/%3e%3cfeBlend%20mode='normal'%20in2='BackgroundImageFix'%20result='effect1_dropShadow_17618_19546'/%3e%3cfeBlend%20mode='normal'%20in='SourceGraphic'%20in2='effect1_dropShadow_17618_19546'%20result='shape'/%3e%3c/filter%3e%3c/defs%3e%3c/svg%3e", "" + import.meta.url).href; 13989var closeIconWhite = new URL("data:image/svg+xml,%3csvg%20width='12'%20height='16'%20viewBox='0%200%2012%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M10.75%2011.7188C11.0312%2012.0312%2011.0312%2012.5%2010.75%2012.7812C10.4375%2013.0938%209.96875%2013.0938%209.6875%2012.7812L6%209.0625L2.28125%2012.7812C1.96875%2013.0938%201.5%2013.0938%201.21875%2012.7812C0.90625%2012.5%200.90625%2012.0312%201.21875%2011.7188L4.9375%208L1.21875%204.28125C0.90625%203.96875%200.90625%203.5%201.21875%203.21875C1.5%202.90625%201.96875%202.90625%202.25%203.21875L6%206.96875L9.71875%203.25C10%202.9375%2010.4688%202.9375%2010.75%203.25C11.0625%203.53125%2011.0625%204%2010.75%204.3125L7.03125%208L10.75%2011.7188Z'%20fill='white'/%3e%3c/svg%3e", "" + import.meta.url).href; 13990var closeIcon = new URL("data:image/svg+xml,%3csvg%20height='8'%20version='1.1'%20viewBox='0%200%208%208'%20width='8'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3ctitle%3ex%3c/title%3e%3cdesc%3eCreated%20using%20Figma%3c/desc%3e%3cg%20id='Canvas'%20transform='translate(-3520%20-7503)'%3e%3cg%20id='x'%3e%3cuse%20fill='%23777777'%20transform='translate(3520%207503)'%20xlink:href='%23path0_fill'/%3e%3c/g%3e%3c/g%3e%3cdefs%3e%3cpath%20d='M%205.14286%204L%208%201.14286L%206.85714%200L%204%202.85714L%201.14286%200L%200%201.14286L%202.85714%204L%200%206.85714L%201.14286%208L%204%205.14286L%206.85714%208L%208%206.85714L%205.14286%204Z'%20fill-rule='evenodd'%20id='path0_fill'/%3e%3c/defs%3e%3c/svg%3e", "" + import.meta.url).href; 13991var videoSlashSvg = new URL("data:image/svg+xml,%3csvg%20width='41'%20height='33'%20viewBox='0%200%2041%2033'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M39.875%2030.375C40.5625%2030.875%2040.6875%2031.8125%2040.125%2032.4375C39.8125%2032.8125%2039.375%2033%2038.9375%2033C38.625%2033%2038.3125%2032.9375%2038%2032.625L1.0625%203.6875C0.375%203.1875%200.25%202.25%200.8125%201.625C1.3125%200.9375%202.25%200.8125%202.875%201.375L7.5625%205H24.5C26.6875%205%2028.5%206.8125%2028.5%209V10.1875L34.9375%207.25C35.6875%206.875%2036.625%206.9375%2037.3125%207.4375C38.0625%207.875%2038.5%208.6875%2038.5%209.5V22.5C38.5%2023.375%2037.8125%2024%2037%2024C36.125%2024%2035.5%2023.375%2035.5%2022.5V10.3125L28.5%2013.5V21.375L39.875%2030.375ZM25.5%2019.0625V9C25.5%208.5%2025%208%2024.5%208H11.4375L25.5%2019.0625ZM24.5%2026C24.5625%2026%2024.5625%2026%2024.625%2026L27.1875%2028C26.4375%2028.625%2025.5%2029%2024.5%2029H6.5C4.25%2029%202.5%2027.25%202.5%2025V9C2.5%208.875%202.5%208.75%202.5%208.625L5.5%2010.9375V25C5.5%2025.5625%205.9375%2026%206.5%2026H24.5Z'%20fill='white'/%3e%3c/svg%3e", "" + import.meta.url).href; 13992/** 13993* Creates and styles an HTML element. 13994*/ 13995var createStyledElement = (tag, cssText) => { 13996 const element = document.createElement(tag); 13997 element.style.cssText = cssText; 13998 return element; 13999}; 14000/** 14001* Opens a Picture-in-Picture (PiP) window with recording UI. 14002*/ 14003var openPendingPipWindow = async (streamType, messagePort, dimensions, onPipWindowClosed) => { 14004 try { 14005 await new Promise((resolve) => setTimeout(resolve, 500)); 14006 const pipWindow = await window.documentPictureInPicture.requestWindow({ 14007 width: dimensions.width, 14008 height: dimensions.height, 14009 preferInitialWindowPlacement: true, 14010 disallowReturnToOpener: true 14011 }); 14012 const style = createStyledElement("style", ""); 14013 style.textContent = pipStyles.global; 14014 pipWindow.document.head.appendChild(style); 14015 const wrapper = createStyledElement("div", streamType === "screen" ? pipStyles.screenWrapper : pipStyles.cameraWrapper); 14016 wrapper.setAttribute("id", ELEMENT_IDS.PIP_WRAPPER); 14017 const bottomContainer = createStyledElement("div", pipStyles.bottomContainer); 14018 bottomContainer.setAttribute("id", ELEMENT_IDS.BOTTOM_CONTAINER); 14019 const controlBar = pipWindow.document.createElement("div"); 14020 controlBar.setAttribute("id", ELEMENT_IDS.CONTROL_BAR); 14021 const canvasContainer = createStyledElement("div", pipStyles.canvasContainer); 14022 canvasContainer.id = ELEMENT_IDS.CANVAS_CONTAINER; 14023 const canvas = createStyledElement("canvas", pipStyles.canvas); 14024 canvasContainer.appendChild(canvas); 14025 controlBar.append(canvasContainer); 14026 const rive = createAnimatedRecordWindow(pipWindow, canvas, messagePort); 14027 pipWindow.document.body.append(wrapper); 14028 bottomContainer.append(controlBar); 14029 wrapper.append(bottomContainer); 14030 const unloadHandler = () => { 14031 rive.cleanup(); 14032 onPipWindowClosed(); 14033 }; 14034 pipWindow.addEventListener("unload", unloadHandler, { once: true }); 14035 pipWindow.addEventListener("resize", () => { 14036 rive.resizeDrawingSurfaceToCanvas(); 14037 }); 14038 const removeUnloadListener = () => { 14039 pipWindow.removeEventListener("unload", unloadHandler); 14040 }; 14041 pipWindow.document.addEventListener("contextmenu", (event) => event.preventDefault()); 14042 return { 14043 pipWindow, 14044 removeUnloadListener 14045 }; 14046 } catch (err) { 14047 setErrorNotification({ message: "Something went wrong. Try again or c
14047ontact Support." }); 14048 reportRecorderError(err, { 14049 recorderEventType: RecorderLoggingEventType.FailedToOpenPipWindow, 14050 metadata: { 14051 streamType, 14052 dimensions 14053 } 14054 }); 14055 } 14056}; 14057var removePipVideo = (pipWindow) => { 14058 pipWindow.document.querySelector("video")?.remove(); 14059}; 14060var addSettingsAndMicToPip = (pipWindow) => { 14061 if (!pipWindow) return; 14062 const settingsWrapper = createStyledElement("div", pipStyles.settingsButton); 14063 settingsWrapper.id = ELEMENT_IDS.SETTINGS_WRAPPER; 14064 const micContainer = document.createElement("div"); 14065 micContainer.setAttribute("id", ELEMENT_IDS.MIC_WRAPPER); 14066 const controlBar = pipWindow.document.getElementById(ELEMENT_IDS.CONTROL_BAR); 14067 controlBar.style.cssText = pipStyles.controlBar; 14068 controlBar.prepend(settingsWrapper); 14069 controlBar.append(micContainer); 14070 const settingsButton = document.createElement("img"); 14071 settingsButton.src = settingsSvg; 14072 settingsButton.alt = "settings"; 14073 settingsButton.id = ELEMENT_IDS.SETTINGS_IMAGE; 14074 settingsWrapper.appendChild(settingsButton); 14075}; 14076/** 14077* Adds a video stream to the PiP window. 14078*/ 14079var addVideoStreamToPip = (pipWindow, stream) => { 14080 if (!pipWindow) return; 14081 removePipVideo(pipWindow); 14082 const pipVideo = createStyledElement("video", pipStyles.video); 14083 pipVideo.srcObject = stream; 14084 pipVideo.autoplay = true; 14085 pipVideo.muted = true; 14086 pipWindow.document.body.prepend(pipVideo); 14087}; 14088/** 14089* Shows a countdown animation in the PiP window. 14090*/ 14091var showCountdownAnimationPipWindow = (pipWindow, messagePort) => { 14092 if (!pipWindow) return; 14093 const wrapper = createStyledElement("div", pipStyles.countdownWrapper); 14094 wrapper.setAttribute("id", ELEMENT_IDS.COUNTDOWN_ANIMATION); 14095 const canvas = createStyledElement("canvas", "height: 232px;"); 14096 const rive = countdownAnimation(canvas, messagePort); 14097 pipWindow.document.body.appendChild(wrapper); 14098 wrapper.appendChild(canvas); 14099 pipWindow.addEventListener("unload", () => { 14100 rive.cleanup(); 14101 }, { once: true }); 14102 pipWindow.addEventListener("resize", () => { 14103 rive.resizeDrawingSurfaceToCanvas(); 14104 }); 14105}; 14106var removeCountdownAnimation = (pipWindow) => { 14107 pipWindow?.document.getElementById(ELEMENT_IDS.COUNTDOWN_ANIMATION)?.remove(); 14108}; 14109var addMicBarToPip = (pipWindow) => { 14110 if (pipWindow.document) { 14111 const container = pipWindow.document.getElementById("mic-wrapper"); 14112 const micVisualizer = pipWindow.document.createElement("div"); 14113 micVisualizer.id = ELEMENT_IDS.MIC_VISUALIZER; 14114 micVisualizer.style.cssText = pipStyles.micVisualizer; 14115 container.appendChild(micVisualizer); 14116 } 14117}; 14118var addRecordLabel = (pipWindow) => { 14119 pipWindow?.document.getElementById(ELEMENT_IDS.RECORD_LABEL)?.remove(); 14120 if (pipWindow.document) { 14121 const recordLabel = createStyledElement("label", pipStyles.recordLabel); 14122 recordLabel.innerText = "Click to record"; 14123 recordLabel.id = ELEMENT_IDS.RECORD_LABEL; 14124 pipWindow.document.getElementById(ELEMENT_IDS.BOTTOM_CONTAINER).prepend(recordLabel); 14125 } 14126}; 14127var removeSettings = (pipWindow) => { 14128 pipWindow?.document.getElementById(ELEMENT_IDS.SETTINGS_IMAGE)?.remove(); 14129 const settingsWrapper = pipWindow?.document.getElementById(ELEMENT_IDS.SETTINGS_WRAPPER); 14130 if (!settingsWrapper) return; 14131 settingsWrapper.setAttribute("disabled", "true"); 14132 settingsWrapper.style.pointerEvents = "none"; 14133 settingsWrapper.onclick = () => {}; 14134}; 14135var addSettingScreen = (pipWindow, selectedCamera, cameras = [], selectedMicrophone, microphones = [], handleChangeDevice, onSettingsButtonClick) => { 14136 if (!pipWindow) return; 14137 const settingsWrapper = pipWindow.document.getElementById(ELEMENT_IDS.SETTINGS_WRAPPER); 14138 if (!settingsWrapper) return; 14139 pipWindow.document.getElementById(ELEMENT_IDS.SETTINGS_SCREEN)?.remove(); 14140 const settingsScreen = createStyledElement("div", pipStyles.settingsScreen); 14141 settingsScreen.id = ELEMENT_IDS.SETTINGS_SCREEN; 14142 const settingsContent = createStyledElement("div", pipStyles.settingsContent); 14143 const cameraSelectContainer = createStyledElement("div", pipStyles.selectContainer); 14144 const cameraSelect = createStyledElement("select", pipStyles.select); 14145 cameraSelect.value = selectedCamera.deviceId; 14146 cameras.forEach(({ label, deviceId }) => { 14147 const cameraOption = createStyledElement("option", ""); 14148 cameraOption.setAttribute("value", deviceId); 14149 cameraOption.textContent = cleanLabel(label); 14150 if (selectedCamera.deviceId === deviceId) cameraOption.selected = true; 14151 cameraSelect.append(cameraOption); 14152 }); 14153 const cameraLabel = createStyledElement("label", pipStyles.selectLabel); 14154 cameraLabel.innerText = "Camera"; 14155 cameraSelectContainer.append(cameraLabel, cameraSelect); 14156 const microphoneSelectContainer = createStyledElement("div", pipStyles.selectContainer); 14157 const microphoneSelect = createStyledElement("select", pipStyles.select); 14158 microphoneSelect.value = selectedMicrophone.deviceId;
14159 microphones.forEach(({ label, deviceId }) => { 14160 const micOption = createStyledElement("option", ""); 14161 micOption.setAttribute("value", deviceId); 14162 micOption.textContent = cleanLabel(label); 14163 if (selectedMicrophone.deviceId === deviceId) micOption.selected = true; 14164 microphoneSelect.append(micOption); 14165 }); 14166 const microphoneLabel = createStyledElement("label", pipStyles.selectLabel); 14167 microphoneLabel.innerText = "Microphone"; 14168 microphoneSelectContainer.append(microphoneLabel, microphoneSelect); 14169 const applyButton = createStyledElement("button", ""); 14170 applyButton.textContent = "Apply"; 14171 applyButton.style.cssText = pipStyles.applyButton; 14172 applyButton.onclick = () => { 14173 const selectedCameraOptionId = cameraSelect.value; 14174 const selectedMicrophoneId = microphoneSelect.value; 14175 const selectedCameraOption = cameras.find(({ deviceId }) => deviceId === selectedCameraOptionId); 14176 const selectedMicrophoneOption = microphones.find(({ deviceId }) => deviceId === selectedMicrophoneId); 14177 settingsScreen.style.display = "none"; 14178 handleChangeDevice(selectedCameraOption, selectedMicrophoneOption); 14179 }; 14180 const exitButton = createStyledElement("button", pipStyles.exitButton); 14181 const cancelIcon = createStyledElement("img", "cursor: pointer;"); 14182 cancelIcon.src = closeIconWhite; 14183 cancelIcon.alt = "cancelIcon"; 14184 cancelIcon.style.fill = "#FFFFFF"; 14185 exitButton.append(cancelIcon); 14186 exitButton.onclick = () => { 14187 settingsScreen.style.display = "none"; 14188 cameraSelect.value = selectedCamera.deviceId; 14189 microphoneSelect.value = selectedMicrophone.deviceId; 14190 }; 14191 settingsScreen.append(settingsContent); 14192 settingsContent.append(exitButton); 14193 settingsContent.append(cameraSelectContainer); 14194 settingsContent.append(microphoneSelectContainer); 14195 settingsContent.append(applyButton); 14196 pipWindow.document.body.append(settingsScreen); 14197 settingsWrapper.onclick = function() { 14198 settingsScreen.style.display = settingsScreen.style.display === "flex" ? "none" : "flex"; 14199 onSettingsButtonClick(); 14200 }; 14201}; 14202var setupCameraPipWindow = async (pipWindow, stream, width, height, handleChangeDevice, onSettingsButtonClick) => { 14203 if (!pipWindow) return; 14204 addVideoStreamToPip(pipWindow, stream); 14205 addSettingsAndMicToPip(pipWindow); 14206 addMicBarToPip(pipWindow); 14207 startMicVisualizer(stream, pipWindow); 14208 const { cameras, mics } = await fetchDevices(); 14209 const selectedCamera = cameras.find(({ label }) => stream.getVideoTracks()[0].label.toLowerCase().includes(label.toLowerCase())); 14210 const selectedMicrophone = mics.find(({ label }) => stream.getAudioTracks()[0].label.toLowerCase().includes(label.toLowerCase())); 14211 addSettingScreen(pipWindow, selectedCamera ?? cameras[0], cameras, selectedMicrophone ?? mics[0], mics, (cameraDevice, microphoneDevice) => handleChangeDevice(cameraDevice, microphoneDevice, width, height), onSettingsButtonClick); 14212}; 14213var openRetakeDialog = (pipWindow, onRetakeHandler, onCancelHandler) => { 14214 if (!pipWindow) return; 14215 const dialogWrapper = createStyledElement("div", pipStyles.retakeDialogWrapper); 14216 dialogWrapper.id = ELEMENT_IDS.RETAKE_DIALOG; 14217 const retakeDialog = createStyledElement("div", pipStyles.retakeDialog); 14218 const titleWrapper = createStyledElement("div", pipStyles.retakeDialogTitleWrapper); 14219 const dialogTitle = createStyledElement("label", pipStyles.retakeDialogTitle); 14220 dialogTitle.innerText = "Re-record your footage?"; 14221 const closeButtonWrapper = createStyledElement("div", pipStyles.retakeDialogCloseButtonWrapper); 14222 closeButtonWrapper.onclick = onCancelHandler; 14223 const closeButton = createStyledElement("img", pipStyles.retakeDialogCloseButton); 14224 closeButton.src = closeIcon; 14225 closeButton.alt = "Close"; 14226 closeButtonWrapper.appendChild(closeButton); 14227 titleWrapper.append(dialogTitle, closeButtonWrapper); 14228 const retakeDialogContent = createStyledElement("label", pipStyles.retakeDialogContent); 14229 retakeDialogContent.innerText = "Your existing footage will be deleted and cannot be recovered."; 14230 const dialogActionsWrapper = createStyledElement("div", pipStyles.dialogActionsWrapper); 14231 const cancelButton = createStyledElement("button", pipStyles.retakeDialogCancelButton); 14232 cancelButton.innerText = "Cancel"; 14233 cancelButton.onclick = onCancelHandler; 14234 const retakeButton = createStyledElement("button", pipStyles.retakeDialogRetakeButton); 14235 retakeButton.innerText = "Re-record"; 14236 retakeButton.onclick = onRetakeHandler; 14237 dialogActionsWrapper.append(cancelButton, retakeButton); 14238 retakeDialog.append(titleWrapper, retakeDialogContent, dialogActionsWrapper); 14239 dialogWrapper.append(retakeDialog); 14240 pipWindow.document.body.append(dialogWrapper); 14241}; 14242var closeRetakeDialog = (pipWindow) => { 14243 pipWindow.document.getElementById(ELEMENT_IDS.RETAKE_DIALOG)?.remove(); 14244};
14245var addNoCameraAvailableScreen = (pipWindow, onClose) => { 14246 if (!pipWindow) return; 14247 pipWindow.document.getElementById(ELEMENT_IDS.PIP_WRAPPER)?.remove(); 14248 const screenWrapper = createStyledElement("div", pipStyles.settingsScreen); 14249 screenWrapper.style.display = "flex"; 14250 const screenContent = createStyledElement("div", pipStyles.noCameraAvailableContent); 14251 const videoSlashIcon = createStyledElement("img", ""); 14252 videoSlashIcon.src = videoSlashSvg; 14253 videoSlashIcon.alt = "videoSlashIcon"; 14254 const titleContainer = createStyledElement("div", pipStyles.noCameraAvailableTitleContainer); 14255 const title = createStyledElement("label", pipStyles.noAvailableCameraTitle); 14256 title.innerText = "Camera is unavailable"; 14257 const description = createStyledElement("label", pipStyles.noAvailableCameraTitle); 14258 description.style.fontSize = "14px"; 14259 description.innerText = "Another app may be using it, try closing it and try again"; 14260 titleContainer.append(title, description); 14261 const closeButton = createStyledElement("button", pipStyles.noAvailableCameraCloseButton); 14262 closeButton.textContent = "Close"; 14263 closeButton.onclick = onClose; 14264 screenContent.append(videoSlashIcon, titleContainer, closeButton); 14265 screenWrapper.append(screenContent); 14266 pipWindow.document.body.append(screenWrapper); 14267}; 14268//#endregion 14269//#region client/components/newNav/components/recordingTool/pipWindow/recordingTimerUtils.ts 14270var blueRevertSvg = new URL("data:image/svg+xml,%3csvg%20width='19'%20height='18'%20viewBox='0%200%2019%2018'%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3ctitle%3eVector%3c/title%3e%3cdesc%3eCreated%20using%20Figma%3c/desc%3e%3cg%20id='Canvas'%20transform='translate(-418%20-1778)'%3e%3cg%20id='Vector'%3e%3cuse%20xlink:href='%23path0_fill'%20transform='matrix(-1%200%200%201%20436.124%201778)'%20fill='%230053E5'/%3e%3c/g%3e%3c/g%3e%3cdefs%3e%3cpath%20id='path0_fill'%20d='M%2016.9732%200C%2016.6546%200%2016.3833%200.11287%2016.1591%200.338614C%2015.9349%200.564358%2015.8228%200.831682%2015.8228%201.14059L%2015.8228%203.8495C%2015.7756%203.80198%2015.6458%203.64159%2015.4334%203.36832C%2015.221%203.09505%2015.0794%202.91683%2015.0086%202.83366C%2014.9378%202.75049%2014.7904%202.58416%2014.5662%202.33465C%2014.342%202.08515%2014.165%201.90693%2014.0352%201.8C%2013.9054%201.69307%2013.7107%201.53861%2013.4511%201.33663C%2013.1916%201.13465%2012.9615%200.986139%2012.7609%200.891089C%2012.5603%200.796039%2012.3066%200.677228%2011.9998%200.534653C%2011.6931%200.392078%2011.3922%200.291089%2011.0972%200.231683C%2010.8022%200.172277%2010.4718%200.118812%2010.1061%200.0712871C%209.74028%200.0237622%209.3568%200%208.95563%200C%206.47777%200%204.36573%200.879199%202.61943%202.63762C%200.873135%204.39605%200%206.51682%200%209C%200%2011.4832%200.873135%2013.604%202.61943%2015.3624C%204.36573%2017.1208%206.47777%2018%208.95563%2018C%2010.8907%2018%2012.637%2017.4297%2014.1945%2016.2891C%2015.752%2015.1485%2016.8375%2013.6515%2017.4511%2011.798C%2017.5455%2011.4891%2017.5219%2011.1921%2017.3803%2010.9069C%2017.2387%2010.6218%2017.0145%2010.4257%2016.7077%2010.3188C%2016.401%2010.2119%2016.1001%2010.2356%2015.8051%2010.3901C%2015.5101%2010.5446%2015.3154%2010.7762%2015.221%2011.0851C%2014.7727%2012.4396%2013.9703%2013.5386%2012.814%2014.3822C%2011.6577%2015.2257%2010.3715%2015.6475%208.95563%2015.6475C%207.11494%2015.6475%205.55155%2015%204.26543%2013.705C%202.9793%2012.4099%202.33625%2010.8416%202.33625%209C%202.33625%207.15841%202.9793%205.59011%204.26543%204.29505C%205.55155%202.99999%207.11494%202.35248%208.95563%202.35248C%2010.112%202.35248%2011.0854%202.6495%2011.8759%203.24356C%2012.6665%203.83763%2013.4157%204.64554%2014.1237%205.66733L%2011.2211%205.66733C%2010.9143%205.66733%2010.6488%205.7802%2010.4246%206.00594C%2010.2004%206.23168%2010.0884%206.50495%2010.0884%206.82574C%2010.0884%207.14654%2010.2004%207.4198%2010.4246%207.64554C%2010.6488%207.87129%2010.9143%207.98416%2011.2211%207.98416L%2016.9909%207.98416C%2017.2977%207.98416%2017.5632%207.87129%2017.7874%207.64554C%2018.0116%207.4198%2018.1236%207.15248%2018.1236%206.84356L%2018.1236%201.14059C%2018.1236%200.831682%2018.0116%200.564358%2017.7874%200.338614C%2017.5632%200.11287%2017.2918%200%2016.9732%200Z'/%3e%3c/defs%3e%3c/svg%3e", "" + import.meta.url).href; 14271var MAX_RECORDING_TIME = 300; 14272var FORMATTED_MAX_RECORDING_TIME = `${MAX_RECORDING_TIME / 60}:00`; 14273var recordingTimer = null; 14274var elapsedSeconds = 0; 14275var updateTimeLabel = (pipWindow, time) => { 14276 if (!pipWindow) return; 14277 const minutes = Math.floor(time / 60); 14278 const seconds = time % 60; 14279 const formattedMinutes = minutes < 10 ? `0${minutes}` : minutes; 14280 const formattedSeconds = seconds < 10 ? `0${seconds}` : seconds; 14281 const recordLabel = pipWindow.document.getElementById(ELEMENT_IDS.RECORD_LABEL);
14282 if (recordLabel) recordLabel.innerText = `${formattedMinutes}:${formattedSeconds} / ${FORMATTED_MAX_RECORDING_TIME}`; 14283}; 14284var removeTimeLimitScreen = (pipWindow) => { 14285 pipWindow.document.getElementById(ELEMENT_IDS.TIME_LIMIT_SCREEN)?.remove(); 14286}; 14287var addTimeLimitScreen = (pipWindow, onSaveHandler, onRetakeHandler) => { 14288 if (!pipWindow) return; 14289 const screenWrapper = createStyledElement("div", pipStyles.timesUpScreenWrapper); 14290 screenWrapper.id = ELEMENT_IDS.TIME_LIMIT_SCREEN; 14291 const container = createStyledElement("div", pipStyles.timesUpContainer); 14292 const label = createStyledElement("label", pipStyles.recordLabel); 14293 label.innerText = "Recording stopped. \n The 5 minute time limit was exceeded."; 14294 label.style.textAlign = "center"; 14295 const saveButton = createStyledElement("button", pipStyles.saveButton); 14296 saveButton.innerText = "Save"; 14297 saveButton.onclick = onSaveHandler; 14298 const reRecordButton = createStyledElement("button", pipStyles.reRecordButton); 14299 reRecordButton.onclick = onRetakeHandler; 14300 const revertIcon = document.createElement("img"); 14301 revertIcon.src = blueRevertSvg; 14302 revertIcon.alt = "revertSvg"; 14303 revertIcon.style.width = "13px"; 14304 revertIcon.style.height = "13px"; 14305 revertIcon.style.marginRight = "8px"; 14306 reRecordButton.append(revertIcon, "Re-record"); 14307 container.appendChild(label); 14308 container.appendChild(saveButton); 14309 container.appendChild(reRecordButton); 14310 screenWrapper.append(container); 14311 pipWindow.document.body.append(screenWrapper); 14312}; 14313/** 14314* The shared per-second tick logic. 14315*/ 14316function spawnRecordingInterval(pipWindow, onSave, onRetake) { 14317 return window.setInterval(() => { 14318 elapsedSeconds += 1; 14319 if (elapsedSeconds <= MAX_RECORDING_TIME) updateTimeLabel(pipWindow, elapsedSeconds); 14320 if (elapsedSeconds === MAX_RECORDING_TIME) { 14321 clearInterval(recordingTimer); 14322 recordingTimer = null; 14323 addTimeLimitScreen(pipWindow, onSave, onRetake); 14324 } 14325 }, 1e3); 14326} 14327/** 14328* Starts ticking the recording clock in the PiP UI. 14329*/ 14330/** now takes your callbacks */ 14331function startRecordingTimer(pipWindow, onSave, onRetake) { 14332 elapsedSeconds = 0; 14333 updateTimeLabel(pipWindow, elapsedSeconds); 14334 if (recordingTimer != null) clearInterval(recordingTimer); 14335 recordingTimer = spawnRecordingInterval(pipWindow, onSave, onRetake); 14336} 14337/** 14338* Pauses the recording clock but keeps the elapsed time. 14339*/ 14340function pauseRecordingTimer() { 14341 if (recordingTimer != null) { 14342 clearInterval(recordingTimer); 14343 recordingTimer = null; 14344 } 14345} 14346/** 14347* Resumes the recording clock from wherever it was paused. 14348*/ 14349function resumeRecordingTimer(pipWindow, onSave, onRetake) { 14350 if (recordingTimer != null) return; 14351 updateTimeLabel(pipWindow, elapsedSeconds); 14352 recordingTimer = spawnRecordingInterval(pipWindow, onSave, onRetake); 14353} 14354/** 14355* Stops and clears the recording clock. 14356*/ 14357function stopRecordingTimer(pipWindow) { 14358 pauseRecordingTimer(); 14359 addRecordLabel(pipWindow); 14360} 14361//#endregion 14362//#region client/components/newNav/components/recordingTool/animations/RecordAnimationUtils.ts 14363var import_rive = require_rive(); 14364var import_dist = require_dist(); 14365var pipControls = new URL("/client/images/screen_record_pip_control.Bnl2Dzyy.riv", "" + import.meta.url).href; 14366var countdown = new URL("/client/images/screen_record_countdown.OmKOm6d-.riv", "" + import.meta.url).href; 14367var STATE_MACHINE = "State Machine 1"; 14368var RecordingEvents = /* @__PURE__ */ function(RecordingEvents) { 14369 RecordingEvents["Play"] = "Play Event"; 14370 RecordingEvents["Stop"] = "Stop Event"; 14371 RecordingEvents["Pause"] = "Pause Event"; 14372 RecordingEvents["Record"] = "Record Event"; 14373 RecordingEvents["StartRecording"] = "Start Record"; 14374 RecordingEvents["Restart"] = "Restart Event"; 14375 RecordingEvents["Retake"] = "Dialogue Retake"; 14376 return RecordingEvents; 14377}({}); 14378var RiveEvents = /* @__PURE__ */ function(RiveEvents) { 14379 RiveEvents["LoadingFinished"] = "Loading Finished"; 14380 RiveEvents["Enable"] = "Enable"; 14381 RiveEvents["Refresh"] = "Refresh"; 14382 return RiveEvents; 14383}({}); 14384var HoverEvents = /* @__PURE__ */ function(HoverEvents) { 14385 HoverEvents["RefreshHover"] = "Refresh Hover"; 14386 HoverEvents["RefreshUnHover"] = "Refresh Unhover"; 14387 HoverEvents["StopHover"] = "Stop Hover"; 14388 HoverEvents["StopUnHover"] = "Stop Unhover"; 14389 HoverEvents["PausePlayHover"] = "Puase/Play Hover"; 14390 HoverEvents["PausePlayUnHover"] = "Pause/Play Unhover"; 14391 return HoverEvents; 14392}({}); 14393/** 14394* Sends a message to the provided MessagePort. 14395*/ 14396var sendMessage = (messagePort, eventName) => { 14397 messagePort?.postMessage(eventName); 14398}; 14399/** 14400* Handles hover-related cursor changes. 14401*/ 14402var handleHoverEvent = (canvas, eventName) => { 14403 const hoverEvents = /* @__PURE__ */ new Set([ 14404 "Refresh Hover", 14405 "Stop Hover", 14406 "Puase/Play Hover" 14407 ]); 14408 canvas.style.cursor = hoverEvents.has(eventName) ? "pointer" : "default"; 14409}; 14410/** 14411* Finds and fires a state machine input by name 14412*/ 14413var fireInput = (rive, stateMachineName, inputName) => { 14414 rive.stateMachineInputs(stateMachineName)?.find((i) => i.name === inputName)?.fire(); 14415}; 14416/** 14417* Handles the restart recording flow 14418*/ 14419var handleRestart = (rive, pipWindow, messagePort) => { 14420 pauseRecordingTimer(); 14421 openRetakeDialog(pipWindow, () => { 14422 closeRetakeDialog(pipWindow); 14423 removeTimeLimitScreen(pipWindow); 14424 stopRecordingTimer(pipWindow); 14425 fireInput(rive, STATE_MACHINE, "Dialogue Retake"); 14426 sendMessage(messagePort, "Dialogue Retake"); 14427 }, () => closeRetakeDialog(pipWindow)); 14428}; 14429var onSaveTimeLimitReached = (pipWindow, messagePort) => { 14430 stopRecordingTimer(pipWindow); 14431 sendMessage(messagePort, "Stop Event"); 14432}; 14433var onRetakeTimeLimitReached = (rive, messagePort) => { 14434 fireInput(rive, STATE_MACHINE, "Refresh"); 14435 sendMessage(messagePort, "Dialogue Retake"); 14436}; 14437/** 14438* Handles Rive events and dispatches actions accordingly. 14439*/ 14440var onRiveEventReceived = (riveEvent, rive, pipWindow, canvas, messagePort) => { 14441 const { name } = riveEvent.data; 14442 if (Object.values(RecordingEvents).includes(name)) { 14443 sendMessage(messagePort, name); 14444 switch (name) { 14445 case "Stop Event": 14446 stopRecordingTimer(pipWindow); 14447 window.focus(); 14448 break; 14449 case "Record Event": 14450 showCountdownAnimationPipWindow(pipWindow, messagePort); 14451 break; 14452 case "Restart Event": 14453 handleRestart(rive, pipWindow, messagePort); 14454 break; 14455 case "Pause Event": 14456 pauseRecordingTimer(); 14457 break; 14458 case "Play Event": 14459 resumeRecordingTimer(pipWindow, () => onSaveTimeLimitReached(pipWindow, messagePort), () => onRetakeTimeLimitReached(rive, messagePort)); 14460 break; 14461 } 14462 } else if (Object.values(HoverEvents).includes(name)) handleHoverEvent(canvas, name); 14463}; 14464/** 14465* Creates the main recording animation window 14466*/ 14467var createAnimatedRecordWindow = (pipWindow, canvas, messagePort) => { 14468 const rive = new import_rive.Rive({ 14469 canvas,
14470 src: pipControls, 14471 stateMachines: "State Machine 1", 14472 autoplay: true, 14473 layout: new import_dist.Layout({ 14474 fit: import_dist.Fit.Cover, 14475 alignment: import_dist.Alignment.Center 14476 }), 14477 onLoad: () => { 14478 rive.resizeDrawingSurfaceToCanvas(); 14479 } 14480 }); 14481 rive.on(import_rive.EventType.RiveEvent, (event) => onRiveEventReceived(event, rive, pipWindow, canvas, messagePort)); 14482 messagePort.onmessage = (event) => { 14483 switch (event.data) { 14484 case "Loading Finished": 14485 fireInput(rive, STATE_MACHINE, "Enable"); 14486 break; 14487 case "Start Record": 14488 removeCountdownAnimation(pipWindow); 14489 fireInput(rive, STATE_MACHINE, "Start Record"); 14490 removeSettings(pipWindow); 14491 startRecordingTimer(pipWindow, () => onSaveTimeLimitReached(pipWindow, messagePort), () => onRetakeTimeLimitReached(rive, messagePort)); 14492 break; 14493 case "Restart Event": 14494 fireInput(rive, STATE_MACHINE, "Refresh"); 14495 pauseRecordingTimer(); 14496 break; 14497 } 14498 }; 14499 return rive; 14500}; 14501/** 14502* Creates the countdown animation 14503*/ 14504var countdownAnimation = (canvas, messagePort) => { 14505 const rive = new import_rive.Rive({ 14506 canvas, 14507 src: countdown, 14508 stateMachines: "State Machine 1", 14509 autoplay: true, 14510 layout: new import_dist.Layout({ alignment: import_dist.Alignment.Center }), 14511 onLoad: () => rive.resizeDrawingSurfaceToCanvas() 14512 }); 14513 rive.on(import_rive.EventType.RiveEvent, (event) => { 14514 if (event.data.type === import_rive.RiveEventType.General && event.data.name === "Start Record") sendMessage(messagePort, "Start Record"); 14515 }); 14516 return rive; 14517}; 14518//#endregion 14519//#region client/components/newNav/hooks/RecordingTool/UseRecordingSession/useRecordingSession.ts 14520var useRecordingSession = () => { 14521 const recordingSession = useReactiveVar(localRecordingToolSession); 14522 const setRecordingSession = (session) => { 14523 localRecordingToolSession(session); 14524 }; 14525 const clearRecordingSession = () => { 14526 localRecordingToolSession()?.destroy(); 14527 localRecordingToolSession(null); 14528 localRecordingToolState(null); 14529 }; 14530 return { 14531 recordingSession, 14532 setRecordingSession, 14533 clearRecordingSession 14534 }; 14535}; 14536//#endregion 14537//#region client/components/newNav/hooks/RecordingTool/UseRecordingToolPermissionDenied/useRecordingToolPermissionDenied.ts 14538var useRecordingToolPermissionDenied = () => { 14539 const recordingToolPermissionDenied = useReactiveVar(localRecordingToolPermissionsDeniedState); 14540 const setRecordingToolPermissionDenied = (state) => { 14541 localRecordingToolPermissionsDeniedState(state); 14542 }; 14543 return { 14544 recordingToolPermissionDenied, 14545 setRecordingToolPermissionDenied 14546 }; 14547}; 14548//#endregion 14549export { FloatingTruffleMediaLibrary as $, useKeyPressed as $n, wireframePlaceholderToScenePlaceholderConverter as $r, useConvertToVideoAccountRestrictions as $t, getMentionOptions as A, persistMediaLibraryGridColumns as An, setProjectSelectedNarrator as Ar, FinalStep as At, getNoDataLibraryComponent as B, useAssetLibraryMedia as Bn, updateEditorProgramVersionAspectRatio as Br, NoSearchResults as Bt, getNarrationTextAndRate as C, require_faFolderArrowUp as Cn, setEditorReviewPanelMode as Cr, getCameraWindowSize as Ct, isLastUsageOfAvatar as D, require_faArrowUpAZ as Dn, setProjectAudioSettings as Dr, useRecordingToolMenuAnchor as Dt, isDeltaEmpty as E, TruffleMediaLibraryContext as En, setPreSelectedLibrary as Er, require_faCircleDot as Et, getStaticTextAtomContent as F, getFolderName as Fn, updateEditorChaptering as Fr, useAiGenerationDialogOpen as Ft, useStudioElements as G, MoveToFolderDialog as Gn, getScene as Gr, handleFileUploadAsync as Gt, getAccountDataLibraryForProgram as H, useLibraryDirectAncestorMedia as Hn, upgradeEditorProgramToM2Layouts as Hr, getEncodedAssetUrl as Ht, getTextAtomContent as I, getMediaFolder as In, updateEditorNarrationLibrary as Ir, useSetAiGenerationDialogInfo as It, useEditorDataConnectorEnabled as J, empty_folder_default as Jn, refreshAccountProgramsScenes as Jr, non_empty_ai_video_drafts_folder_default as Jt, useStudioElementsForProgramVersion as K, MoveToFolderDialogActions as Kn, getSceneWithoutCcData as Kr, useEditorMediaDragAndDropSnackbar as Kt, isContentEmpty as L, loadMediaData as Ln, updateEditorProgramLifecycleStage as Lr, useEditorPermissions as Lt, getNarrationTextShowValueFromContent as M, setMediaLibraryGridColumns as Mn, setSelectedNarrationPlaceholderOpenEdit as Mr, PreviewTrigger as Mt, getOriginLanguageUsedElementId as N, createEditorAssetFolder as Nn, setSelectedPlaceholderIds as Nr, VideoDurationEnum as Nt, NoSourceLanguageTokenSuggestion as O, require_faArrowDownAZ as On, setProjectLineup as Or, AiMediaGenerationMode as Ot, getSsmlTextForNarrationPreviewFromContent as P, generateAssetNonGettyPremiumFilter as Pn, setSelectedPlaceholderOpenEdit as Pr, getVideoDurationSeconds as Pt, setUserSettings as Q, MULTI_SELECT_MODIFIER_KEY as Qn, reportPending as Qr, useShowDropHintFromMediaLibrary as Qt, onChangeCallbackDynamicCheck as R, moveEditorAssetToFolder as Rn, updateEditorProgramName as Rr, useAiMediaGenBlockState as Rt, getNarrationPlaceholder as S, require_faCloudPlus as Sn, setEditorPublishState as Sr, fetchDevices as St, getVideoAvatarsInfo as T, NumericFormat as Tn, setIsSelectedSceneIsNew as Tr, useRecordingState as Tt, openLibrary as U, useLibraryOriginalAsset as Un, addScenes as Ur, handleAssetUploadError as Ut, getNoDataLibraryForAutocomplete as V, useLibraryAsset as Vn, updateEditorProgramVersionSourceLanguage as Vr, AssetPreviewDialog as Vt, useByAudienceStudioElementOptions as W, useMediaLibraryReady as Wn, duplicateSceneInLineup as Wr, handleFileUpload as Wt, useScene as X, require_faFolderPlus as Xn, selectScene as Xr, AssetThumbnail as Xt, useSelectedFrame as Y, NewFolderDialog as Yn, removeScene as Yr, SvgConvertImageToVideoIcon as Yt, getAssetSourceContributions as Z, DebouncedSearch as Zn, updateScenePlaceholdersAndAnimatedWireframe as Zr, VideoThumbnail as Zt, AiVoicesTermsVariant as _, PreviewAssetDialogPaperProps as _n, setEditorAutoOpenReviewPanel as _r, RecordingState as _t, RiveEvents as a, isRelevantWireframe as ai, AssetThreeDotsMenu as an, clearUndoStack as ar, setDockedMediaLibraryCurrentFolderId as at, getAvatarsUsedInAlternativeVoice as b, useEditorProgramVersionId as bn, setEditorIsPreviewM2 as br, reportRecorderError as bt, openPendingPipWindow as c, createVideoFromSlides as ci, uploadEditorAssetMediaFromUrl as cn, ChangeProgramToLiveContext as cr, setDockedMediaLibraryFilterMediaType as ct, PermissionDeniedModal as d, triggerCopyPlaceholderSuccess as di, DraggedItemType as dn, getEditorPublishState as dr, setDockedMediaLibrarySearchValue as dt, AddSwitchSceneBaseDialogClient as ei, LOGO_CONVERT_TO_VIDEO_DISABLED_TOOLTIP as en, disableUndoKeyboardShortcuts as er, useMultiSelect as et, RECORDINGS_FOL
14549DER_NAME as f, hasDataItems as fn, getSelectedSceneId as fr, setDockedMediaLibrarySelectedItemData as ft, AiVoicesTermsDialog as g, ItemType as gn, recalculateEditorNarrationRecordingState as gr, useSelectedLibrary as gt, getVideoDuration as h, ASSET_NAME_CANNOT_BE_EMPTY as hn, publishEditorProgram as hr, setDockedMediaLibraryStockSortOrder as ht, RecordingEvents as i, isRelevantAnimatedWireframe as ii, require_faArrowUpRightAndArrowDownLeftFromCenter as in, overrideUndoKeyboardShortcuts as ir, setDockedMediaLibraryActiveTab as it, getNarrationSsmlText as j, setMediaLibraryByAudienceCaseIndex as jn, setSelectedAudioPreview as jr, OperationType as jt, buildDeltaOperationInsert as k, NoFilteredResults as kn, setProjectSelectedMusicId as kr, AiVideoGenerationStep as kt, setupCameraPipWindow as l, removeBrandDisclaimer as li, uploadGettyExternalEditorAssetMedia as ln, changeProgramToLive as lr, setDockedMediaLibraryFilterMinVideoDuration as lt, getImageDimensions as m, ASSET_NAME_ALREADY_EXISTS as mn, onEditCopilotVideo as mr, setDockedMediaLibrarySortDirection as mt, useRecordingSession as n, getAnimatedWireframePlaceholderSettings as ni, resolveConvertToVideoDisabledTooltip as nn, isMac as nr, useShowInMediaLibrary as nt, addNoCameraAvailableScreen as o, placeholderHasCanvasInAnimatedWireframe as oi, handleExternalAssetUpload as on, redoLastAction as or, setDockedMediaLibraryFilterMaxVideoDuration as ot, getDateForFileName as p, ItemDetailsPopover as pn, navigateToEditVideo as pr, setDockedMediaLibrarySortBy as pt, useEditorDynamicElements as q, non_empty_folder_default as qn, importEditorScene as qr, useExtendedDropzone as qt, HoverEvents as r, isDiscontinuedAnimatedWireframe as ri, require_faSparkles as rn, isTextInputTargeted as rr, clearDockedMediaLibraryFilters as rt, addRecordLabel as s, addBrandDisclaimer as si, handleUploadAiImageAsset as sn, undoLastAction as sr, setDockedMediaLibraryFilterMediaSource as st, useRecordingToolPermissionDenied as t, animatedWireframeContainsCanvas as ti, POSTER_IMAGE_CONVERT_TO_VIDEO_DISABLED_TOOLTIP as tn, enableUndoKeyboardShortcuts as tr, TruffleMediaLibraryBase as tt, require_dist as u, clearCopyPlaceholderSuccess as ui, uploadOptimizedEditorAssetMedia as un, getEditorIsPreviewM2 as ur, setDockedMediaLibraryFilterStockOrientation as ut, useAiVoicesTermsAcceptance as v, validateEditedFolderName as vn, setEditorCommentsPanelOpen as vr, RecordingToolSingleSession as vt, getNarrationTextInformation as w, require_faList as wn, setEditorTtsFullEnablement as wr, permissionsDeniedHandler as wt, getCurrentSceneAvatar as x, require_faFolderClosed as xn, setEditorPermissions as xr, cleanLabel as xt, AI_error_optimized_default as y, EditorProgramVersionIdContext as yn, setEditorIsInReview as yr, RecorderLoggingEventType as yt, generateNarrationSsml as z, useEditorUsageAcceptance as zn, updateEditorProgramThemeId as zr, AssetMediaDetailsTable as zt }; 14550 14551//# sourceMappingURL=useRecordingToolPermissionDenied.FQj5-aQv.js.map 14552//# debugId=0f3ee3e6-3774-5f28-93e9-21bb0182d58b
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.