npm - @ynput/ayon-frontend-shared - Versions diffs - 0.2.7 → 0.2.10 - Mend

@ynput/ayon-frontend-shared 0.2.7 → 0.2.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (987) hide show

package/dist/shared/src/components/ReviewablesList/ReviewablesList.es.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ReviewablesList.es.js","sources":["../../../../../src/components/ReviewablesList/ReviewablesList.tsx"],"sourcesContent":["import { FC, MouseEvent, useState } from 'react'\n// queries\nimport { useGetReviewablesForVersionQuery, useHasTranscoderQuery } from '@shared/api'\nimport { useDeleteReviewableMutation, useSortVersionReviewablesMutation } from '@shared/api'\n\n// DND\nimport {\n DndContext,\n closestCenter,\n KeyboardSensor,\n PointerSensor,\n useSensor,\n useSensors,\n UniqueIdentifier,\n DragEndEvent,\n DragOverlay,\n DragStartEvent,\n} from '@dnd-kit/core'\nimport {\n arrayMove,\n SortableContext,\n sortableKeyboardCoordinates,\n verticalListSortingStrategy,\n} from '@dnd-kit/sortable'\n\n// components\nimport { ReviewableCard, ReviewableProgressCard } from '@shared/components'\nimport SortableReviewableCard from './SortableReviewableCard'\nimport * as Styled from './ReviewablesList.styled'\nimport { toast } from 'react-toastify'\n\n// utils\nimport { getGroupedReviewables } from './getGroupedReviewables'\nimport { useCreateContextMenu } from '@shared/containers/ContextMenu'\nimport { confirmDelete } from '@shared/util'\nimport EditReviewableDialog from './EditReviewableDialog'\nimport ReviewableUpload from './ReviewablesUpload'\nimport { useDetailsPanelContext } from '@shared/context'\n\ninterface ReviewablesListProps {\n projectName: string\n versionId: string\n productId: string\n isLoadingVersion: boolean\n scope: string\n}\n\nconst ReviewablesList: FC<ReviewablesListProps> = ({\n projectName,\n versionId,\n productId,\n isLoadingVersion,\n scope,\n}) => {\n const { onOpenViewer, user, viewer } = useDetailsPanelContext()\n // returns all reviewables for a product\n const {\n data: versionReviewables,\n isFetching: isFetchingReviewables,\n currentData,\n } = useGetReviewablesForVersionQuery(\n { projectName, versionId: versionId },\n { skip: !versionId \|\| !projectName },\n )\n\n // do we have the premium transcoder?\n const { data: hasTranscoder } = useHasTranscoderQuery(undefined)\n\n // are we currently looking at review? (is it selected in the viewer)\n const reviewableIds = viewer?.reviewableIds \|\| []\n const userName = user.name\n const currentIsUser = user.data?.isUser\n\n // either null or the reviewable id we are editing\n const [editActivityId, setEditActivityId] = useState<null \| string>(null)\n\n // dragging activeId\n const [activeId, setActiveId] = useState<null \| string>(null)\n\n const sensors = useSensors(\n useSensor(PointerSensor),\n useSensor(KeyboardSensor, {\n coordinateGetter: sortableKeyboardCoordinates,\n }),\n )\n\n const reviewables = versionReviewables?.reviewables \|\| []\n const draggingReview = reviewables.find((reviewable) => reviewable.fileId === activeId)\n\n const currentVersionId = currentData?.id\n const queryingNewVersion = versionId !== currentVersionId\n\n const isLoading = (isFetchingReviewables && queryingNewVersion) \|\| isLoadingVersion\n\n const handleReviewableClick = (event: MouseEvent<HTMLDivElement>) => {\n // check are not dragging\n if (activeId) return console.log('Dragging, cannot open review')\n\n // get the reviewable id\n const id = event.currentTarget.id\n if (!id \|\| !productId) return console.error('No reviewable id or product id')\n\n const reviewable = reviewables.find((reviewable) => reviewable.fileId === id)\n console.debug(reviewable)\n console.debug(reviewable?.mediaInfo)\n\n // open the reviewable dialog\n onOpenViewer?.({\n projectName: projectName,\n productId: productId,\n versionIds: [versionId],\n reviewableIds: [id],\n })\n }\n\n const { optimized, unoptimized, incompatible, processing, queued } = getGroupedReviewables(\n reviewables,\n hasTranscoder,\n )\n\n const sortableReviewables = [...optimized, ...unoptimized]\n\n function handleDragStart(event: DragStartEvent) {\n const { active } = event\n\n setActiveId(active.id as string)\n }\n\n const [sortVersionReviewables] = useSortVersionReviewablesMutation()\n\n const handleDragEnd = async (event: DragEndEvent) => {\n const { active, over } = event\n\n if (over?.id && active.id !== over.id) {\n console.log('update review position')\n\n const oldIndex = sortableReviewables.findIndex(\n (reviewable) => reviewable.fileId === active.id,\n )\n const newIndex = sortableReviewables.findIndex((reviewable) => reviewable.fileId === over.id)\n\n // resort the reviewables\n const newReviewables = arrayMove(sortableReviewables, oldIndex, newIndex)\n\n const newOrder = newReviewables.map((reviewable) => reviewable.activityId)\n\n try {\n // update the reviewables\n sortVersionReviewables({\n projectName,\n versionId,\n sortReviewablesRequest: { sort: newOrder },\n }).unwrap()\n } catch (error) {\n toast.error('Error sorting reviewables')\n }\n }\n setActiveId(null)\n }\n\n const overlayModifiers = []\n // hack to make the dnd overlay pos work inside dialog\n if (scope === 'review') {\n overlayModifiers.push((args: any) => ({\n ...args.transform,\n x: args.transform.x - 32,\n y: args.transform.y - 32,\n }))\n }\n\n let incompatibleMessage = ''\n if (!hasTranscoder) {\n incompatibleMessage = `The conversion transcoder is only supported on [Ynput Cloud](https://ynput.cloud/subscribe/ayon). Please subscribe or [contact support](https://ynput.io/services/) for more information.`\n } else {\n incompatibleMessage = 'The file is not supported by the transcoder'\n }\n\n const handleDownloadFile = (fileId: string, fileName: string = '') => {\n let url = `/api/projects/${projectName}/files/${fileId}`\n\n // if (codec) url += `.${codec}`\n\n // Create an invisible anchor element\n const a = document.createElement('a')\n a.href = url\n a.download = fileName\n document.body.appendChild(a)\n\n // Trigger a click event on the anchor element\n a.click()\n\n // Remove the anchor element from the document\n document.body.removeChild(a)\n }\n\n const [deleteReviewable] = useDeleteReviewableMutation()\n\n const handleDelete = async (activityId: string, label: string) => {\n // @ts-ignore\n confirmDelete({\n header: 'Delete ' + label,\n message: 'Are you sure you want to delete this reviewable?',\n accept: async () => {\n try {\n await deleteReviewable({ activityId, projectName }).unwrap()\n } catch (error) {\n toast.error('Failed to delete reviewable')\n }\n },\n })\n }\n\n // create the ref and model\n const [ctxMenuShow] = useCreateContextMenu()\n\n const handleContextMenu = (event: MouseEvent<HTMLDivElement>) => {\n // get the reviewable by id\n const id = event.currentTarget.id\n\n if (!id) return\n\n const reviewable = reviewables.find((reviewable) => reviewable.fileId === id)\n\n if (!reviewable) return\n\n const originalFileId = reviewable.createdFrom \|\| reviewable.fileId\n const originalReviewable = reviewables.find(\n (reviewable) => reviewable.fileId === originalFileId,\n )\n\n const items: {\n label: string\n icon: string\n onClick?: () => void\n disabled?: boolean\n danger?: boolean\n }[] = [\n {\n label: 'Download original',\n icon: 'download',\n onClick: () => handleDownloadFile(originalFileId, originalReviewable?.filename),\n disabled: !originalReviewable,\n },\n ]\n\n if (userName === reviewable.author.name \|\| !currentIsUser) {\n items.push({\n label: 'Delete',\n icon: 'delete',\n onClick: () => handleDelete(reviewable.activityId, reviewable.label \|\| reviewable.filename),\n danger: true,\n })\n }\n\n // add author\n items.push({\n label: `Author: ${reviewable.author.fullName \|\| reviewable.author.name}`,\n icon: 'person',\n disabled: true,\n })\n\n ctxMenuShow(event, items)\n }\n\n return (\n <>\n <ReviewableUpload projectName={projectName} versionId={versionId} productId={productId}>\n {isLoading ? (\n Array.from({ length: 3 }).map((_, index) => (\n <Styled.LoadingCard key={index} className=\"loading\" />\n ))\n ) : (\n <>\n <DndContext\n sensors={sensors}\n collisionDetection={closestCenter}\n onDragStart={handleDragStart}\n onDragEnd={handleDragEnd}\n onDragCancel={() => setActiveId(null)}\n >\n <SortableContext\n items={reviewables.map(({ fileId }) => fileId as UniqueIdentifier)}\n strategy={verticalListSortingStrategy}\n >\n {sortableReviewables.map((reviewable) => (\n <SortableReviewableCard\n key={reviewable.fileId}\n projectName={projectName}\n onClick={handleReviewableClick}\n isSelected={reviewableIds.includes(reviewable.fileId)}\n isDragging={!!activeId}\n onContextMenu={handleContextMenu}\n onEdit={(e) => {\n e.stopPropagation()\n setEditActivityId(reviewable.activityId)\n }}\n {...reviewable}\n />\n ))}\n </SortableContext>\n\n {/* drag overlay */}\n <DragOverlay modifiers={overlayModifiers}>\n {draggingReview ? (\n <ReviewableCard\n {...draggingReview}\n projectName={projectName}\n isDragOverlay\n isDragging\n isSelected={reviewableIds.includes(draggingReview.fileId)}\n />\n ) : null}\n </DragOverlay>\n </DndContext>\n {processing.map((reviewable) => (\n <ReviewableProgressCard\n key={reviewable.fileId}\n name={reviewable.filename}\n type={'processing'}\n progress={reviewable.processing?.progress}\n fileId={reviewable.fileId}\n />\n ))}\n\n {queued.map((reviewable) => (\n <ReviewableProgressCard\n key={reviewable.fileId}\n name={reviewable.filename}\n type={'queued'}\n fileId={reviewable.fileId}\n />\n ))}\n\n {incompatible.map((reviewable) => (\n <ReviewableProgressCard\n key={reviewable.fileId}\n name={reviewable.filename}\n type={'unsupported'}\n tooltip={incompatibleMessage}\n src={`/api/projects/${projectName}/files/${reviewable.fileId}/thumbnail`}\n onContextMenu={handleContextMenu}\n fileId={reviewable.fileId}\n />\n ))}\n </>\n )}\n </ReviewableUpload>\n\n {editActivityId && (\n <EditReviewableDialog\n isOpen\n onClose={() => setEditActivityId(null)}\n label={\n reviewables.find((reviewable) => reviewable.activityId === editActivityId)?.label \|\| ''\n }\n projectName={projectName}\n versionId={versionId}\n activityId={editActivityId}\n />\n )}\n </>\n )\n}\n\nexport default ReviewablesList\n"],"names":["reviewable","jsxs","Fragment","jsx","Styled.LoadingCard","_a"],"mappings":"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"}
1	+ {"version":3,"file":"ReviewablesList.es.js","sources":["../../../../../src/components/ReviewablesList/ReviewablesList.tsx"],"sourcesContent":["import { FC, MouseEvent, useState } from 'react'\n// queries\nimport { useGetReviewablesForVersionQuery, useHasTranscoderQuery } from '@shared/api'\nimport { useDeleteReviewableMutation, useSortVersionReviewablesMutation } from '@shared/api'\n\n// DND\nimport {\n DndContext,\n closestCenter,\n KeyboardSensor,\n PointerSensor,\n useSensor,\n useSensors,\n UniqueIdentifier,\n DragEndEvent,\n DragOverlay,\n DragStartEvent,\n} from '@dnd-kit/core'\nimport {\n arrayMove,\n SortableContext,\n sortableKeyboardCoordinates,\n verticalListSortingStrategy,\n} from '@dnd-kit/sortable'\n\n// components\nimport { ReviewableCard, ReviewableProgressCard } from '@shared/components'\nimport SortableReviewableCard from './SortableReviewableCard'\nimport * as Styled from './ReviewablesList.styled'\nimport { toast } from 'react-toastify'\n\n// utils\nimport { getGroupedReviewables } from './getGroupedReviewables'\nimport { useCreateContextMenu } from '@shared/containers/ContextMenu'\nimport { confirmDelete } from '@shared/util'\nimport EditReviewableDialog from './EditReviewableDialog'\nimport ReviewableUpload from './ReviewablesUpload'\nimport { useDetailsPanelContext } from '@shared/context'\n\ninterface ReviewablesListProps {\n projectName: string\n versionId: string\n productId: string\n isLoadingVersion: boolean\n scope: string\n}\n\nconst ReviewablesList: FC<ReviewablesListProps> = ({\n projectName,\n versionId,\n productId,\n isLoadingVersion,\n scope,\n}) => {\n const { onOpenViewer, user, viewer } = useDetailsPanelContext()\n // returns all reviewables for a product\n const {\n data: versionReviewables,\n isFetching: isFetchingReviewables,\n currentData,\n } = useGetReviewablesForVersionQuery(\n { projectName, versionId: versionId },\n { skip: !versionId \|\| !projectName },\n )\n\n // do we have the premium transcoder?\n const { data: hasTranscoder } = useHasTranscoderQuery(undefined)\n\n // are we currently looking at review? (is it selected in the viewer)\n const reviewableIds = viewer?.reviewableIds \|\| []\n const userName = user.name\n const currentIsUser = user.data?.isUser\n\n // either null or the reviewable id we are editing\n const [editActivityId, setEditActivityId] = useState<null \| string>(null)\n\n // dragging activeId\n const [activeId, setActiveId] = useState<null \| string>(null)\n\n const sensors = useSensors(\n useSensor(PointerSensor),\n useSensor(KeyboardSensor, {\n coordinateGetter: sortableKeyboardCoordinates,\n }),\n )\n\n const reviewables = versionReviewables?.reviewables \|\| []\n const draggingReview = reviewables.find((reviewable) => reviewable.fileId === activeId)\n\n const currentVersionId = currentData?.id\n const queryingNewVersion = versionId !== currentVersionId\n\n const isLoading = (isFetchingReviewables && queryingNewVersion) \|\| isLoadingVersion\n\n const handleReviewableClick = (event: MouseEvent<HTMLDivElement>) => {\n // check are not dragging\n if (activeId) return console.log('Dragging, cannot open review')\n\n // get the reviewable id\n const id = event.currentTarget.id\n if (!id \|\| !productId) return console.error('No reviewable id or product id')\n\n const reviewable = reviewables.find((reviewable) => reviewable.fileId === id)\n console.debug(reviewable)\n console.debug(reviewable?.mediaInfo)\n\n // open the reviewable dialog\n onOpenViewer?.({\n projectName: projectName,\n productId: productId,\n versionIds: [versionId],\n reviewableIds: [id],\n })\n }\n\n const { optimized, unoptimized, incompatible, processing, queued } = getGroupedReviewables(\n reviewables,\n hasTranscoder,\n )\n\n const sortableReviewables = [...optimized, ...unoptimized]\n\n function handleDragStart(event: DragStartEvent) {\n const { active } = event\n\n setActiveId(active.id as string)\n }\n\n const [sortVersionReviewables] = useSortVersionReviewablesMutation()\n\n const handleDragEnd = async (event: DragEndEvent) => {\n const { active, over } = event\n\n if (over?.id && active.id !== over.id) {\n console.log('update review position')\n\n const oldIndex = sortableReviewables.findIndex(\n (reviewable) => reviewable.fileId === active.id,\n )\n const newIndex = sortableReviewables.findIndex((reviewable) => reviewable.fileId === over.id)\n\n // resort the reviewables\n const newReviewables = arrayMove(sortableReviewables, oldIndex, newIndex)\n\n const newOrder = newReviewables.map((reviewable) => reviewable.activityId)\n\n try {\n // update the reviewables\n sortVersionReviewables({\n projectName,\n versionId,\n sortReviewablesRequest: { sort: newOrder },\n }).unwrap()\n } catch (error) {\n toast.error('Error sorting reviewables')\n }\n }\n setActiveId(null)\n }\n\n const overlayModifiers = []\n // hack to make the dnd overlay pos work inside dialog\n if (scope === 'review') {\n overlayModifiers.push((args: any) => ({\n ...args.transform,\n x: args.transform.x - 32,\n y: args.transform.y - 32,\n }))\n }\n\n let incompatibleMessage = ''\n if (!hasTranscoder) {\n incompatibleMessage = `The conversion transcoder is only supported on [Ynput Cloud](https://ynput.cloud/subscribe/ayon). Please subscribe or [contact support](https://ynput.io/services/) for more information.`\n } else {\n incompatibleMessage = 'The file is not supported by the transcoder'\n }\n\n const handleDownloadFile = (fileId: string, fileName: string = '') => {\n let url = `/api/projects/${projectName}/files/${fileId}`\n\n // if (codec) url += `.${codec}`\n\n // Create an invisible anchor element\n const a = document.createElement('a')\n a.href = url\n a.download = fileName\n document.body.appendChild(a)\n\n // Trigger a click event on the anchor element\n a.click()\n\n // Remove the anchor element from the document\n document.body.removeChild(a)\n }\n\n const [deleteReviewable] = useDeleteReviewableMutation()\n\n const handleDelete = async (activityId: string, label: string) => {\n // @ts-ignore\n confirmDelete({\n header: 'Delete ' + label,\n message: 'Are you sure you want to delete this reviewable?',\n accept: async () => {\n try {\n await deleteReviewable({ activityId, projectName }).unwrap()\n } catch (error) {\n toast.error('Failed to delete reviewable')\n }\n },\n })\n }\n\n // create the ref and model\n const [ctxMenuShow] = useCreateContextMenu()\n\n const handleContextMenu = (event: MouseEvent<HTMLDivElement>) => {\n // get the reviewable by id\n const id = event.currentTarget.id\n\n if (!id) return\n\n const reviewable = reviewables.find((reviewable) => reviewable.fileId === id)\n\n if (!reviewable) return\n\n const originalFileId = reviewable.createdFrom \|\| reviewable.fileId\n const originalReviewable = reviewables.find(\n (reviewable) => reviewable.fileId === originalFileId,\n )\n\n const items: {\n label: string\n icon: string\n onClick?: () => void\n disabled?: boolean\n danger?: boolean\n }[] = [\n {\n label: 'Download original',\n icon: 'download',\n onClick: () => handleDownloadFile(originalFileId, originalReviewable?.filename),\n disabled: !originalReviewable,\n },\n ]\n\n if (userName === reviewable.author.name \|\| !currentIsUser) {\n items.push({\n label: 'Delete',\n icon: 'delete',\n onClick: () => handleDelete(reviewable.activityId, reviewable.label \|\| reviewable.filename),\n danger: true,\n })\n }\n\n // add author\n items.push({\n label: `Author: ${reviewable.author.fullName \|\| reviewable.author.name}`,\n icon: 'person',\n disabled: true,\n })\n\n ctxMenuShow(event, items)\n }\n\n return (\n <>\n <ReviewableUpload projectName={projectName} versionId={versionId} productId={productId}>\n {isLoading ? (\n Array.from({ length: 3 }).map((_, index) => (\n <Styled.LoadingCard key={index} className=\"loading\" />\n ))\n ) : (\n <>\n <DndContext\n sensors={sensors}\n collisionDetection={closestCenter}\n onDragStart={handleDragStart}\n onDragEnd={handleDragEnd}\n onDragCancel={() => setActiveId(null)}\n >\n <SortableContext\n items={reviewables.map(({ fileId }) => fileId as UniqueIdentifier)}\n strategy={verticalListSortingStrategy}\n >\n {sortableReviewables.map((reviewable) => (\n <SortableReviewableCard\n key={reviewable.fileId}\n projectName={projectName}\n onClick={handleReviewableClick}\n isSelected={reviewableIds.includes(reviewable.fileId)}\n isDragging={!!activeId}\n onContextMenu={handleContextMenu}\n onEdit={(e) => {\n e.stopPropagation()\n setEditActivityId(reviewable.activityId)\n }}\n {...reviewable}\n />\n ))}\n </SortableContext>\n\n {/* drag overlay */}\n <DragOverlay modifiers={overlayModifiers}>\n {draggingReview ? (\n <ReviewableCard\n {...draggingReview}\n projectName={projectName}\n isDragOverlay\n isDragging\n isSelected={reviewableIds.includes(draggingReview.fileId)}\n />\n ) : null}\n </DragOverlay>\n </DndContext>\n {processing.map((reviewable) => (\n <ReviewableProgressCard\n key={reviewable.fileId}\n name={reviewable.filename}\n type={'processing'}\n progress={reviewable.processing?.progress}\n fileId={reviewable.fileId}\n />\n ))}\n\n {queued.map((reviewable) => (\n <ReviewableProgressCard\n key={reviewable.fileId}\n name={reviewable.filename}\n type={'queued'}\n fileId={reviewable.fileId}\n />\n ))}\n\n {incompatible.map((reviewable) => (\n <ReviewableProgressCard\n key={reviewable.fileId}\n name={reviewable.filename}\n type={'unsupported'}\n tooltip={incompatibleMessage}\n src={`/api/projects/${projectName}/files/${reviewable.fileId}/thumbnail`}\n onContextMenu={handleContextMenu}\n fileId={reviewable.fileId}\n />\n ))}\n </>\n )}\n </ReviewableUpload>\n\n {editActivityId && (\n <EditReviewableDialog\n isOpen\n onClose={() => setEditActivityId(null)}\n label={\n reviewables.find((reviewable) => reviewable.activityId === editActivityId)?.label \|\| ''\n }\n projectName={projectName}\n versionId={versionId}\n activityId={editActivityId}\n />\n )}\n </>\n )\n}\n\nexport default ReviewablesList\n"],"names":["reviewable","jsxs","Fragment","jsx","Styled.LoadingCard","_a"],"mappings":"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"}

package/dist/shared/src/components/ReviewablesList/ReviewablesUpload.cjs.js CHANGED Viewed

@@ -70,6 +70,7 @@ require("../../api/queries/userDashboard/getUserDashboard.cjs.js");
 require("../../api/queries/users/getUsers.cjs.js");
 require("../../api/queries/users/updateUsers.cjs.js");
 require("../../api/queries/watchers/getWatchers.cjs.js");
+require("../../api/queries/permissions/getPermissions.cjs.js");
 require("../ThumbnailSimple/ThumbnailSimple.cjs.js");
 require("../EmptyPlaceholder/EmptyPlaceholder.cjs.js");
 require("../EmptyPlaceholder/EmptyPlaceholderFlex.styled.cjs.js");
@@ -88,6 +89,8 @@ require("../../context/SettingsPanelContext.cjs.js");
 require("../../context/pip/PiPProvider.cjs.js");
 require("react-dom");
 require("../../context/pip/PiPWrapper.cjs.js");
+require("../../context/AddonProjectContext.cjs.js");
+require("../../context/AddonContext.cjs.js");
 require("../ReviewableCard/ReviewableCard.cjs.js");
 const ReviewableProgressCard = require("../ReviewableProgressCard/ReviewableProgressCard.cjs.js");
 require("../FileThumbnail/FileThumbnail.cjs.js");
@@ -130,6 +133,7 @@ require("../../containers/ProjectTreeTable/context/ColumnSettingsContext.cjs.js"
 require("../../containers/ProjectTreeTable/context/CellEditingContext.cjs.js");
 require("../../containers/ProjectTreeTable/context/ClipboardContext.cjs.js");
 require("../../containers/ProjectTreeTable/context/ProjectTableSelectionContext.cjs.js");
+require("../../containers/ProjectTreeTable/context/ProjectDataContext.cjs.js");
 require("@tanstack/react-table");
 require("../../containers/ProjectTreeTable/widgets/CollapsedWidget.cjs.js");
 require("../../containers/ProjectTreeTable/widgets/DateWidget.cjs.js");

package/dist/shared/src/components/ReviewablesList/ReviewablesUpload.cjs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ReviewablesUpload.cjs.js","sources":["../../../../../src/components/ReviewablesList/ReviewablesUpload.tsx"],"sourcesContent":["import axios, { AxiosProgressEvent, AxiosResponse } from 'axios'\nimport { toast } from 'react-toastify'\nimport { FC, useState, DragEvent, ChangeEvent } from 'react'\nimport clsx from 'clsx'\n\nimport { Icon } from '@ynput/ayon-react-components'\n\nimport api, { reviewablesQueries } from '@shared/api'\nimport type { UploadReviewableApiResponse } from '@shared/api'\n\n// components\nimport { ReviewableProgress, ReviewableProgressCard } from '@shared/components'\nimport * as Styled from './ReviewablesUpload.styled'\nimport { useDetailsPanelContext } from '@shared/context'\n\nexport interface ReviewableUploadProps {\n projectName: string \| null\n versionId: string\n productId: string \| null\n variant?: 'normal' \| 'large'\n onUpload?: () => void\n children?: any\n}\n\nexport const ReviewableUpload: FC<ReviewableUploadProps> = ({\n projectName,\n versionId,\n productId,\n onUpload,\n children,\n variant = 'normal',\n}) => {\n const { viewer, dispatch } = useDetailsPanelContext()\n\n const taskId = viewer?.taskId\n const folderId = viewer?.folderId\n\n // are we dragging a file over?\n const [isDraggingFile, setIsDraggingFile] = useState(false)\n\n const [uploading, setUploads] = useState<{ [key: string]: ReviewableProgress[] }>({})\n\n const handleRemoveUpload = (name: string) => {\n setUploads((uploads) => ({\n ...uploads,\n [versionId]: uploads[versionId]?.filter((upload) => upload.name !== name) \|\| [],\n }))\n }\n\n const handleFileUpload = async (files: FileList) => {\n const uploadingFiles = Array.from(files).map((file) => ({\n name: file.name,\n size: file.size,\n progress: 0,\n }))\n\n const newUploadsForVersion = [...(uploading[versionId] \|\| []), ...uploadingFiles]\n\n setUploads({ ...uploading, [versionId]: newUploadsForVersion })\n\n const successHandler = (file: File) => (response: AxiosResponse) => {\n // Handle successful upload\n console.log(`Upload successful for ${file.name}`)\n // patch the new data into the reviewables cache\n const data = response.data as UploadReviewableApiResponse\n\n if (!projectName) return\n\n dispatch(\n // @ts-ignore\n reviewablesQueries.util.updateQueryData(\n 'getReviewablesForVersion',\n { projectName, versionId },\n (draft) => {\n if (!draft.reviewables) {\n draft.reviewables = []\n }\n // @ts-ignore\n draft.reviewables.push(data)\n },\n ),\n )\n\n // also invalidate the viewer cache\n productId && dispatch(api.util.invalidateTags([{ type: 'viewer', id: productId }]))\n dispatch(api.util.invalidateTags([{ type: 'viewer', id: versionId }]))\n dispatch(api.util.invalidateTags([{ type: 'viewer', id: folderId }]))\n dispatch(api.util.invalidateTags([{ type: 'viewer', id: taskId }]))\n // remove the file from the list\n handleRemoveUpload(file.name)\n }\n\n const errorHandler = (file: File) => (error: any) => {\n console.error(`Upload failed for ${file.name}: ${error}`)\n toast.error(`Failed to upload file: ${file.name}`)\n // add error to the file\n setUploads((uploads) => {\n // current uploads for versionId\n const currentUploads = uploads[versionId] \|\| []\n const updatedUploads = currentUploads.map((upload) => {\n if (upload.name !== file.name) return upload\n return {\n ...upload,\n error: error.response.data.detail \|\| error.message,\n }\n })\n\n // update state\n return {\n ...uploads,\n [versionId]: updatedUploads,\n }\n })\n }\n\n const progressHandler = (file: File) => {\n return (progressEvent: AxiosProgressEvent) =>\n setUploads((uploads) => {\n // current uploads for versionId\n const currentUploads = uploads[versionId] \|\| []\n const updatedUploads = currentUploads.map((upload) => {\n if (upload.name !== file.name) return upload\n return {\n ...upload,\n progress: progressEvent.total\n ? Math.round((progressEvent.loaded / progressEvent.total) * 100)\n : 0,\n }\n })\n\n // update state\n return {\n ...uploads,\n [versionId]: updatedUploads,\n }\n })\n }\n\n try {\n // upload the files\n for (const file of files) {\n const autoLabel = file.name.split('.').slice(0, -1).join('.')\n\n const url = `/api/projects/${projectName}/versions/${versionId}/reviewables?label=${autoLabel}`\n const headers = { 'content-type': file.type, 'x-file-name': file.name }\n axios\n .post(url, file, { headers, onUploadProgress: progressHandler(file) })\n .then(successHandler(file))\n .catch(errorHandler(file))\n }\n // Callback after successful uploads\n onUpload && onUpload()\n } catch (error) {\n // something went wrong with everything, EEEEK!\n console.error(error)\n toast.error('Failed to upload file/s')\n }\n }\n\n const handleInputChange = (event: ChangeEvent<HTMLInputElement>) => {\n const files = event.target.files\n\n if (files) {\n handleFileUpload(files)\n }\n }\n\n // when the user drops a file\n const handleFileDrop = (event: DragEvent<HTMLDivElement>) => {\n event.preventDefault()\n setIsDraggingFile(false)\n\n const files = event.dataTransfer.files\n\n if (files) {\n handleFileUpload(files)\n }\n }\n const variantStyles =\n variant === 'large' ? { minWidth: '360px', maxWidth: '480px', alignSelf: 'center' } : {}\n\n return (\n <>\n {!isDraggingFile && (\n <Styled.ReviewablesList\n onDragEnter={() => setIsDraggingFile(true)}\n className={clsx(variant)}\n >\n <>\n {children}\n {/* uploading items /}\n {uploading[versionId]?.map((file) => (\n <ReviewableProgressCard\n key={file.name}\n {...file}\n type={'upload'}\n onRemove={() => handleRemoveUpload(file.name)}\n />\n ))}\n\n {/ upload button */}\n <Styled.Upload id=\"upload\" className={clsx('upload', variant)} style={variantStyles}>\n <span>Drop or click to upload</span>\n <input type=\"file\" multiple onChange={handleInputChange} />\n </Styled.Upload>\n </>\n </Styled.ReviewablesList>\n )}\n\n {isDraggingFile && (\n <Styled.Dropzone\n onDragOver={(e) => e.preventDefault()}\n onDragLeave={() => setIsDraggingFile(false)}\n onDrop={handleFileDrop}\n >\n <Icon icon=\"upload\" />\n <span>Upload reviewable</span>\n </Styled.Dropzone>\n )}\n </>\n )\n}\n\nexport default ReviewableUpload\n"],"names":["useDetailsPanelContext","useState","_a","reviewablesQueries","api","toast","jsxs","Fragment","jsx","Styled.ReviewablesList","ReviewableProgressCard","Styled.Upload","Styled.Dropzone","Icon"],"mappings":"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"}
1	+ {"version":3,"file":"ReviewablesUpload.cjs.js","sources":["../../../../../src/components/ReviewablesList/ReviewablesUpload.tsx"],"sourcesContent":["import axios, { AxiosProgressEvent, AxiosResponse } from 'axios'\nimport { toast } from 'react-toastify'\nimport { FC, useState, DragEvent, ChangeEvent } from 'react'\nimport clsx from 'clsx'\n\nimport { Icon } from '@ynput/ayon-react-components'\n\nimport api, { reviewablesQueries } from '@shared/api'\nimport type { UploadReviewableApiResponse } from '@shared/api'\n\n// components\nimport { ReviewableProgress, ReviewableProgressCard } from '@shared/components'\nimport * as Styled from './ReviewablesUpload.styled'\nimport { useDetailsPanelContext } from '@shared/context'\n\nexport interface ReviewableUploadProps {\n projectName: string \| null\n versionId: string\n productId: string \| null\n variant?: 'normal' \| 'large'\n onUpload?: () => void\n children?: any\n}\n\nexport const ReviewableUpload: FC<ReviewableUploadProps> = ({\n projectName,\n versionId,\n productId,\n onUpload,\n children,\n variant = 'normal',\n}) => {\n const { viewer, dispatch } = useDetailsPanelContext()\n\n const taskId = viewer?.taskId\n const folderId = viewer?.folderId\n\n // are we dragging a file over?\n const [isDraggingFile, setIsDraggingFile] = useState(false)\n\n const [uploading, setUploads] = useState<{ [key: string]: ReviewableProgress[] }>({})\n\n const handleRemoveUpload = (name: string) => {\n setUploads((uploads) => ({\n ...uploads,\n [versionId]: uploads[versionId]?.filter((upload) => upload.name !== name) \|\| [],\n }))\n }\n\n const handleFileUpload = async (files: FileList) => {\n const uploadingFiles = Array.from(files).map((file) => ({\n name: file.name,\n size: file.size,\n progress: 0,\n }))\n\n const newUploadsForVersion = [...(uploading[versionId] \|\| []), ...uploadingFiles]\n\n setUploads({ ...uploading, [versionId]: newUploadsForVersion })\n\n const successHandler = (file: File) => (response: AxiosResponse) => {\n // Handle successful upload\n console.log(`Upload successful for ${file.name}`)\n // patch the new data into the reviewables cache\n const data = response.data as UploadReviewableApiResponse\n\n if (!projectName) return\n\n dispatch(\n // @ts-ignore\n reviewablesQueries.util.updateQueryData(\n 'getReviewablesForVersion',\n { projectName, versionId },\n (draft) => {\n if (!draft.reviewables) {\n draft.reviewables = []\n }\n // @ts-ignore\n draft.reviewables.push(data)\n },\n ),\n )\n\n // also invalidate the viewer cache\n productId && dispatch(api.util.invalidateTags([{ type: 'viewer', id: productId }]))\n dispatch(api.util.invalidateTags([{ type: 'viewer', id: versionId }]))\n dispatch(api.util.invalidateTags([{ type: 'viewer', id: folderId }]))\n dispatch(api.util.invalidateTags([{ type: 'viewer', id: taskId }]))\n // remove the file from the list\n handleRemoveUpload(file.name)\n }\n\n const errorHandler = (file: File) => (error: any) => {\n console.error(`Upload failed for ${file.name}: ${error}`)\n toast.error(`Failed to upload file: ${file.name}`)\n // add error to the file\n setUploads((uploads) => {\n // current uploads for versionId\n const currentUploads = uploads[versionId] \|\| []\n const updatedUploads = currentUploads.map((upload) => {\n if (upload.name !== file.name) return upload\n return {\n ...upload,\n error: error.response.data.detail \|\| error.message,\n }\n })\n\n // update state\n return {\n ...uploads,\n [versionId]: updatedUploads,\n }\n })\n }\n\n const progressHandler = (file: File) => {\n return (progressEvent: AxiosProgressEvent) =>\n setUploads((uploads) => {\n // current uploads for versionId\n const currentUploads = uploads[versionId] \|\| []\n const updatedUploads = currentUploads.map((upload) => {\n if (upload.name !== file.name) return upload\n return {\n ...upload,\n progress: progressEvent.total\n ? Math.round((progressEvent.loaded / progressEvent.total) * 100)\n : 0,\n }\n })\n\n // update state\n return {\n ...uploads,\n [versionId]: updatedUploads,\n }\n })\n }\n\n try {\n // upload the files\n for (const file of files) {\n const autoLabel = file.name.split('.').slice(0, -1).join('.')\n\n const url = `/api/projects/${projectName}/versions/${versionId}/reviewables?label=${autoLabel}`\n const headers = { 'content-type': file.type, 'x-file-name': file.name }\n axios\n .post(url, file, { headers, onUploadProgress: progressHandler(file) })\n .then(successHandler(file))\n .catch(errorHandler(file))\n }\n // Callback after successful uploads\n onUpload && onUpload()\n } catch (error) {\n // something went wrong with everything, EEEEK!\n console.error(error)\n toast.error('Failed to upload file/s')\n }\n }\n\n const handleInputChange = (event: ChangeEvent<HTMLInputElement>) => {\n const files = event.target.files\n\n if (files) {\n handleFileUpload(files)\n }\n }\n\n // when the user drops a file\n const handleFileDrop = (event: DragEvent<HTMLDivElement>) => {\n event.preventDefault()\n setIsDraggingFile(false)\n\n const files = event.dataTransfer.files\n\n if (files) {\n handleFileUpload(files)\n }\n }\n const variantStyles =\n variant === 'large' ? { minWidth: '360px', maxWidth: '480px', alignSelf: 'center' } : {}\n\n return (\n <>\n {!isDraggingFile && (\n <Styled.ReviewablesList\n onDragEnter={() => setIsDraggingFile(true)}\n className={clsx(variant)}\n >\n <>\n {children}\n {/* uploading items /}\n {uploading[versionId]?.map((file) => (\n <ReviewableProgressCard\n key={file.name}\n {...file}\n type={'upload'}\n onRemove={() => handleRemoveUpload(file.name)}\n />\n ))}\n\n {/ upload button */}\n <Styled.Upload id=\"upload\" className={clsx('upload', variant)} style={variantStyles}>\n <span>Drop or click to upload</span>\n <input type=\"file\" multiple onChange={handleInputChange} />\n </Styled.Upload>\n </>\n </Styled.ReviewablesList>\n )}\n\n {isDraggingFile && (\n <Styled.Dropzone\n onDragOver={(e) => e.preventDefault()}\n onDragLeave={() => setIsDraggingFile(false)}\n onDrop={handleFileDrop}\n >\n <Icon icon=\"upload\" />\n <span>Upload reviewable</span>\n </Styled.Dropzone>\n )}\n </>\n )\n}\n\nexport default ReviewableUpload\n"],"names":["useDetailsPanelContext","useState","_a","reviewablesQueries","api","toast","jsxs","Fragment","jsx","Styled.ReviewablesList","ReviewableProgressCard","Styled.Upload","Styled.Dropzone","Icon"],"mappings":"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"}

package/dist/shared/src/components/ReviewablesList/ReviewablesUpload.es.js CHANGED Viewed

@@ -68,6 +68,7 @@ import "../../api/queries/userDashboard/getUserDashboard.es.js";
 import "../../api/queries/users/getUsers.es.js";
 import "../../api/queries/users/updateUsers.es.js";
 import "../../api/queries/watchers/getWatchers.es.js";
+import "../../api/queries/permissions/getPermissions.es.js";
 import "../ThumbnailSimple/ThumbnailSimple.es.js";
 import "../EmptyPlaceholder/EmptyPlaceholder.es.js";
 import "../EmptyPlaceholder/EmptyPlaceholderFlex.styled.es.js";
@@ -86,6 +87,8 @@ import "../../context/SettingsPanelContext.es.js";
 import "../../context/pip/PiPProvider.es.js";
 import "react-dom";
 import "../../context/pip/PiPWrapper.es.js";
+import "../../context/AddonProjectContext.es.js";
+import "../../context/AddonContext.es.js";
 import "../ReviewableCard/ReviewableCard.es.js";
 import { ReviewableProgressCard } from "../ReviewableProgressCard/ReviewableProgressCard.es.js";
 import "../FileThumbnail/FileThumbnail.es.js";
@@ -128,6 +131,7 @@ import "../../containers/ProjectTreeTable/context/ColumnSettingsContext.es.js";
 import "../../containers/ProjectTreeTable/context/CellEditingContext.es.js";
 import "../../containers/ProjectTreeTable/context/ClipboardContext.es.js";
 import "../../containers/ProjectTreeTable/context/ProjectTableSelectionContext.es.js";
+import "../../containers/ProjectTreeTable/context/ProjectDataContext.es.js";
 import "@tanstack/react-table";
 import "../../containers/ProjectTreeTable/widgets/CollapsedWidget.es.js";
 import "../../containers/ProjectTreeTable/widgets/DateWidget.es.js";

package/dist/shared/src/components/ReviewablesList/ReviewablesUpload.es.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ReviewablesUpload.es.js","sources":["../../../../../src/components/ReviewablesList/ReviewablesUpload.tsx"],"sourcesContent":["import axios, { AxiosProgressEvent, AxiosResponse } from 'axios'\nimport { toast } from 'react-toastify'\nimport { FC, useState, DragEvent, ChangeEvent } from 'react'\nimport clsx from 'clsx'\n\nimport { Icon } from '@ynput/ayon-react-components'\n\nimport api, { reviewablesQueries } from '@shared/api'\nimport type { UploadReviewableApiResponse } from '@shared/api'\n\n// components\nimport { ReviewableProgress, ReviewableProgressCard } from '@shared/components'\nimport * as Styled from './ReviewablesUpload.styled'\nimport { useDetailsPanelContext } from '@shared/context'\n\nexport interface ReviewableUploadProps {\n projectName: string \| null\n versionId: string\n productId: string \| null\n variant?: 'normal' \| 'large'\n onUpload?: () => void\n children?: any\n}\n\nexport const ReviewableUpload: FC<ReviewableUploadProps> = ({\n projectName,\n versionId,\n productId,\n onUpload,\n children,\n variant = 'normal',\n}) => {\n const { viewer, dispatch } = useDetailsPanelContext()\n\n const taskId = viewer?.taskId\n const folderId = viewer?.folderId\n\n // are we dragging a file over?\n const [isDraggingFile, setIsDraggingFile] = useState(false)\n\n const [uploading, setUploads] = useState<{ [key: string]: ReviewableProgress[] }>({})\n\n const handleRemoveUpload = (name: string) => {\n setUploads((uploads) => ({\n ...uploads,\n [versionId]: uploads[versionId]?.filter((upload) => upload.name !== name) \|\| [],\n }))\n }\n\n const handleFileUpload = async (files: FileList) => {\n const uploadingFiles = Array.from(files).map((file) => ({\n name: file.name,\n size: file.size,\n progress: 0,\n }))\n\n const newUploadsForVersion = [...(uploading[versionId] \|\| []), ...uploadingFiles]\n\n setUploads({ ...uploading, [versionId]: newUploadsForVersion })\n\n const successHandler = (file: File) => (response: AxiosResponse) => {\n // Handle successful upload\n console.log(`Upload successful for ${file.name}`)\n // patch the new data into the reviewables cache\n const data = response.data as UploadReviewableApiResponse\n\n if (!projectName) return\n\n dispatch(\n // @ts-ignore\n reviewablesQueries.util.updateQueryData(\n 'getReviewablesForVersion',\n { projectName, versionId },\n (draft) => {\n if (!draft.reviewables) {\n draft.reviewables = []\n }\n // @ts-ignore\n draft.reviewables.push(data)\n },\n ),\n )\n\n // also invalidate the viewer cache\n productId && dispatch(api.util.invalidateTags([{ type: 'viewer', id: productId }]))\n dispatch(api.util.invalidateTags([{ type: 'viewer', id: versionId }]))\n dispatch(api.util.invalidateTags([{ type: 'viewer', id: folderId }]))\n dispatch(api.util.invalidateTags([{ type: 'viewer', id: taskId }]))\n // remove the file from the list\n handleRemoveUpload(file.name)\n }\n\n const errorHandler = (file: File) => (error: any) => {\n console.error(`Upload failed for ${file.name}: ${error}`)\n toast.error(`Failed to upload file: ${file.name}`)\n // add error to the file\n setUploads((uploads) => {\n // current uploads for versionId\n const currentUploads = uploads[versionId] \|\| []\n const updatedUploads = currentUploads.map((upload) => {\n if (upload.name !== file.name) return upload\n return {\n ...upload,\n error: error.response.data.detail \|\| error.message,\n }\n })\n\n // update state\n return {\n ...uploads,\n [versionId]: updatedUploads,\n }\n })\n }\n\n const progressHandler = (file: File) => {\n return (progressEvent: AxiosProgressEvent) =>\n setUploads((uploads) => {\n // current uploads for versionId\n const currentUploads = uploads[versionId] \|\| []\n const updatedUploads = currentUploads.map((upload) => {\n if (upload.name !== file.name) return upload\n return {\n ...upload,\n progress: progressEvent.total\n ? Math.round((progressEvent.loaded / progressEvent.total) * 100)\n : 0,\n }\n })\n\n // update state\n return {\n ...uploads,\n [versionId]: updatedUploads,\n }\n })\n }\n\n try {\n // upload the files\n for (const file of files) {\n const autoLabel = file.name.split('.').slice(0, -1).join('.')\n\n const url = `/api/projects/${projectName}/versions/${versionId}/reviewables?label=${autoLabel}`\n const headers = { 'content-type': file.type, 'x-file-name': file.name }\n axios\n .post(url, file, { headers, onUploadProgress: progressHandler(file) })\n .then(successHandler(file))\n .catch(errorHandler(file))\n }\n // Callback after successful uploads\n onUpload && onUpload()\n } catch (error) {\n // something went wrong with everything, EEEEK!\n console.error(error)\n toast.error('Failed to upload file/s')\n }\n }\n\n const handleInputChange = (event: ChangeEvent<HTMLInputElement>) => {\n const files = event.target.files\n\n if (files) {\n handleFileUpload(files)\n }\n }\n\n // when the user drops a file\n const handleFileDrop = (event: DragEvent<HTMLDivElement>) => {\n event.preventDefault()\n setIsDraggingFile(false)\n\n const files = event.dataTransfer.files\n\n if (files) {\n handleFileUpload(files)\n }\n }\n const variantStyles =\n variant === 'large' ? { minWidth: '360px', maxWidth: '480px', alignSelf: 'center' } : {}\n\n return (\n <>\n {!isDraggingFile && (\n <Styled.ReviewablesList\n onDragEnter={() => setIsDraggingFile(true)}\n className={clsx(variant)}\n >\n <>\n {children}\n {/* uploading items /}\n {uploading[versionId]?.map((file) => (\n <ReviewableProgressCard\n key={file.name}\n {...file}\n type={'upload'}\n onRemove={() => handleRemoveUpload(file.name)}\n />\n ))}\n\n {/ upload button */}\n <Styled.Upload id=\"upload\" className={clsx('upload', variant)} style={variantStyles}>\n <span>Drop or click to upload</span>\n <input type=\"file\" multiple onChange={handleInputChange} />\n </Styled.Upload>\n </>\n </Styled.ReviewablesList>\n )}\n\n {isDraggingFile && (\n <Styled.Dropzone\n onDragOver={(e) => e.preventDefault()}\n onDragLeave={() => setIsDraggingFile(false)}\n onDrop={handleFileDrop}\n >\n <Icon icon=\"upload\" />\n <span>Upload reviewable</span>\n </Styled.Dropzone>\n )}\n </>\n )\n}\n\nexport default ReviewableUpload\n"],"names":["_a","reviewablesQueries","jsxs","Fragment","jsx","Styled.ReviewablesList","Styled.Upload","Styled.Dropzone"],"mappings":"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"}
1	+ {"version":3,"file":"ReviewablesUpload.es.js","sources":["../../../../../src/components/ReviewablesList/ReviewablesUpload.tsx"],"sourcesContent":["import axios, { AxiosProgressEvent, AxiosResponse } from 'axios'\nimport { toast } from 'react-toastify'\nimport { FC, useState, DragEvent, ChangeEvent } from 'react'\nimport clsx from 'clsx'\n\nimport { Icon } from '@ynput/ayon-react-components'\n\nimport api, { reviewablesQueries } from '@shared/api'\nimport type { UploadReviewableApiResponse } from '@shared/api'\n\n// components\nimport { ReviewableProgress, ReviewableProgressCard } from '@shared/components'\nimport * as Styled from './ReviewablesUpload.styled'\nimport { useDetailsPanelContext } from '@shared/context'\n\nexport interface ReviewableUploadProps {\n projectName: string \| null\n versionId: string\n productId: string \| null\n variant?: 'normal' \| 'large'\n onUpload?: () => void\n children?: any\n}\n\nexport const ReviewableUpload: FC<ReviewableUploadProps> = ({\n projectName,\n versionId,\n productId,\n onUpload,\n children,\n variant = 'normal',\n}) => {\n const { viewer, dispatch } = useDetailsPanelContext()\n\n const taskId = viewer?.taskId\n const folderId = viewer?.folderId\n\n // are we dragging a file over?\n const [isDraggingFile, setIsDraggingFile] = useState(false)\n\n const [uploading, setUploads] = useState<{ [key: string]: ReviewableProgress[] }>({})\n\n const handleRemoveUpload = (name: string) => {\n setUploads((uploads) => ({\n ...uploads,\n [versionId]: uploads[versionId]?.filter((upload) => upload.name !== name) \|\| [],\n }))\n }\n\n const handleFileUpload = async (files: FileList) => {\n const uploadingFiles = Array.from(files).map((file) => ({\n name: file.name,\n size: file.size,\n progress: 0,\n }))\n\n const newUploadsForVersion = [...(uploading[versionId] \|\| []), ...uploadingFiles]\n\n setUploads({ ...uploading, [versionId]: newUploadsForVersion })\n\n const successHandler = (file: File) => (response: AxiosResponse) => {\n // Handle successful upload\n console.log(`Upload successful for ${file.name}`)\n // patch the new data into the reviewables cache\n const data = response.data as UploadReviewableApiResponse\n\n if (!projectName) return\n\n dispatch(\n // @ts-ignore\n reviewablesQueries.util.updateQueryData(\n 'getReviewablesForVersion',\n { projectName, versionId },\n (draft) => {\n if (!draft.reviewables) {\n draft.reviewables = []\n }\n // @ts-ignore\n draft.reviewables.push(data)\n },\n ),\n )\n\n // also invalidate the viewer cache\n productId && dispatch(api.util.invalidateTags([{ type: 'viewer', id: productId }]))\n dispatch(api.util.invalidateTags([{ type: 'viewer', id: versionId }]))\n dispatch(api.util.invalidateTags([{ type: 'viewer', id: folderId }]))\n dispatch(api.util.invalidateTags([{ type: 'viewer', id: taskId }]))\n // remove the file from the list\n handleRemoveUpload(file.name)\n }\n\n const errorHandler = (file: File) => (error: any) => {\n console.error(`Upload failed for ${file.name}: ${error}`)\n toast.error(`Failed to upload file: ${file.name}`)\n // add error to the file\n setUploads((uploads) => {\n // current uploads for versionId\n const currentUploads = uploads[versionId] \|\| []\n const updatedUploads = currentUploads.map((upload) => {\n if (upload.name !== file.name) return upload\n return {\n ...upload,\n error: error.response.data.detail \|\| error.message,\n }\n })\n\n // update state\n return {\n ...uploads,\n [versionId]: updatedUploads,\n }\n })\n }\n\n const progressHandler = (file: File) => {\n return (progressEvent: AxiosProgressEvent) =>\n setUploads((uploads) => {\n // current uploads for versionId\n const currentUploads = uploads[versionId] \|\| []\n const updatedUploads = currentUploads.map((upload) => {\n if (upload.name !== file.name) return upload\n return {\n ...upload,\n progress: progressEvent.total\n ? Math.round((progressEvent.loaded / progressEvent.total) * 100)\n : 0,\n }\n })\n\n // update state\n return {\n ...uploads,\n [versionId]: updatedUploads,\n }\n })\n }\n\n try {\n // upload the files\n for (const file of files) {\n const autoLabel = file.name.split('.').slice(0, -1).join('.')\n\n const url = `/api/projects/${projectName}/versions/${versionId}/reviewables?label=${autoLabel}`\n const headers = { 'content-type': file.type, 'x-file-name': file.name }\n axios\n .post(url, file, { headers, onUploadProgress: progressHandler(file) })\n .then(successHandler(file))\n .catch(errorHandler(file))\n }\n // Callback after successful uploads\n onUpload && onUpload()\n } catch (error) {\n // something went wrong with everything, EEEEK!\n console.error(error)\n toast.error('Failed to upload file/s')\n }\n }\n\n const handleInputChange = (event: ChangeEvent<HTMLInputElement>) => {\n const files = event.target.files\n\n if (files) {\n handleFileUpload(files)\n }\n }\n\n // when the user drops a file\n const handleFileDrop = (event: DragEvent<HTMLDivElement>) => {\n event.preventDefault()\n setIsDraggingFile(false)\n\n const files = event.dataTransfer.files\n\n if (files) {\n handleFileUpload(files)\n }\n }\n const variantStyles =\n variant === 'large' ? { minWidth: '360px', maxWidth: '480px', alignSelf: 'center' } : {}\n\n return (\n <>\n {!isDraggingFile && (\n <Styled.ReviewablesList\n onDragEnter={() => setIsDraggingFile(true)}\n className={clsx(variant)}\n >\n <>\n {children}\n {/* uploading items /}\n {uploading[versionId]?.map((file) => (\n <ReviewableProgressCard\n key={file.name}\n {...file}\n type={'upload'}\n onRemove={() => handleRemoveUpload(file.name)}\n />\n ))}\n\n {/ upload button */}\n <Styled.Upload id=\"upload\" className={clsx('upload', variant)} style={variantStyles}>\n <span>Drop or click to upload</span>\n <input type=\"file\" multiple onChange={handleInputChange} />\n </Styled.Upload>\n </>\n </Styled.ReviewablesList>\n )}\n\n {isDraggingFile && (\n <Styled.Dropzone\n onDragOver={(e) => e.preventDefault()}\n onDragLeave={() => setIsDraggingFile(false)}\n onDrop={handleFileDrop}\n >\n <Icon icon=\"upload\" />\n <span>Upload reviewable</span>\n </Styled.Dropzone>\n )}\n </>\n )\n}\n\nexport default ReviewableUpload\n"],"names":["_a","reviewablesQueries","jsxs","Fragment","jsx","Styled.ReviewablesList","Styled.Upload","Styled.Dropzone"],"mappings":"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"}

package/dist/shared/src/components/ReviewablesList/SortableReviewableCard.cjs.js CHANGED Viewed

@@ -72,6 +72,7 @@ require("../../api/queries/userDashboard/getUserDashboard.cjs.js");
 require("../../api/queries/users/getUsers.cjs.js");
 require("../../api/queries/users/updateUsers.cjs.js");
 require("../../api/queries/watchers/getWatchers.cjs.js");
+require("../../api/queries/permissions/getPermissions.cjs.js");
 require("react");
 require("@dnd-kit/core");
 require("./ReviewablesList.styled.cjs.js");
@@ -88,6 +89,8 @@ require("../../context/SettingsPanelContext.cjs.js");
 require("../../context/pip/PiPProvider.cjs.js");
 require("react-dom");
 require("../../context/pip/PiPWrapper.cjs.js");
+require("../../context/AddonProjectContext.cjs.js");
+require("../../context/AddonContext.cjs.js");
 const ReviewableCard = require("../ReviewableCard/ReviewableCard.cjs.js");
 require("../ReviewableProgressCard/ReviewableProgressCard.styled.cjs.js");
 require("../FileThumbnail/FileThumbnail.cjs.js");
@@ -130,6 +133,7 @@ require("../../containers/ProjectTreeTable/context/ColumnSettingsContext.cjs.js"
 require("../../containers/ProjectTreeTable/context/CellEditingContext.cjs.js");
 require("../../containers/ProjectTreeTable/context/ClipboardContext.cjs.js");
 require("../../containers/ProjectTreeTable/context/ProjectTableSelectionContext.cjs.js");
+require("../../containers/ProjectTreeTable/context/ProjectDataContext.cjs.js");
 require("@tanstack/react-table");
 require("../../containers/ProjectTreeTable/widgets/CollapsedWidget.cjs.js");
 require("../../containers/ProjectTreeTable/widgets/DateWidget.cjs.js");

package/dist/shared/src/components/ReviewablesList/SortableReviewableCard.cjs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SortableReviewableCard.cjs.js","sources":["../../../../../src/components/ReviewablesList/SortableReviewableCard.tsx"],"sourcesContent":["import { FC } from 'react'\nimport { useSortable } from '@dnd-kit/sortable'\nimport { CSS } from '@dnd-kit/utilities'\nimport { ReviewableCardProps, ReviewableCard } from '@shared/components'\n\ntype SortableReviewableCardProps = ReviewableCardProps\n\nconst SortableReviewableCard: FC<SortableReviewableCardProps> = ({ ...props }) => {\n const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({\n id: props.fileId,\n animateLayoutChanges: () => false,\n })\n\n const style = {\n transform: CSS.Transform.toString(transform),\n transition,\n }\n\n return (\n <div ref={setNodeRef} style={style}>\n <ReviewableCard\n isDropPlaceholder={isDragging}\n dragProps={{ ...attributes, ...listeners }}\n disabled={props.sortingDisabled}\n {...props}\n />\n </div>\n )\n}\n\nexport default SortableReviewableCard\n"],"names":["useSortable","CSS","jsx","ReviewableCard"],"mappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~AAOA,MAAM,yBAA0D,CAAC,EAAE,GAAG,YAAY;AAC1E,QAAA,EAAE,YAAY,WAAW,YAAY,WAAW,YAAY,eAAeA,qBAAY;AAAA,IAC3F,IAAI,MAAM;AAAA,IACV,sBAAsB,MAAM;AAAA,EAAA,CAC7B;AAED,QAAM,QAAQ;AAAA,IACZ,WAAWC,cAAA,IAAI,UAAU,SAAS,SAAS;AAAA,IAC3C;AAAA,EACF;AAEA,SACGC,2BAAAA,kBAAAA,IAAA,OAAA,EAAI,KAAK,YAAY,OACpB,UAAAA,2BAAA,kBAAA;AAAA,IAACC,eAAA;AAAA,IAAA;AAAA,MACC,mBAAmB;AAAA,MACnB,WAAW,EAAE,GAAG,YAAY,GAAG,UAAU;AAAA,MACzC,UAAU,MAAM;AAAA,MACf,GAAG;AAAA,IAAA;AAAA,EAAA,GAER;AAEJ;;"}
1	+ {"version":3,"file":"SortableReviewableCard.cjs.js","sources":["../../../../../src/components/ReviewablesList/SortableReviewableCard.tsx"],"sourcesContent":["import { FC } from 'react'\nimport { useSortable } from '@dnd-kit/sortable'\nimport { CSS } from '@dnd-kit/utilities'\nimport { ReviewableCardProps, ReviewableCard } from '@shared/components'\n\ntype SortableReviewableCardProps = ReviewableCardProps\n\nconst SortableReviewableCard: FC<SortableReviewableCardProps> = ({ ...props }) => {\n const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({\n id: props.fileId,\n animateLayoutChanges: () => false,\n })\n\n const style = {\n transform: CSS.Transform.toString(transform),\n transition,\n }\n\n return (\n <div ref={setNodeRef} style={style}>\n <ReviewableCard\n isDropPlaceholder={isDragging}\n dragProps={{ ...attributes, ...listeners }}\n disabled={props.sortingDisabled}\n {...props}\n />\n </div>\n )\n}\n\nexport default SortableReviewableCard\n"],"names":["useSortable","CSS","jsx","ReviewableCard"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAOA,MAAM,yBAA0D,CAAC,EAAE,GAAG,YAAY;AAC1E,QAAA,EAAE,YAAY,WAAW,YAAY,WAAW,YAAY,eAAeA,qBAAY;AAAA,IAC3F,IAAI,MAAM;AAAA,IACV,sBAAsB,MAAM;AAAA,EAAA,CAC7B;AAED,QAAM,QAAQ;AAAA,IACZ,WAAWC,cAAA,IAAI,UAAU,SAAS,SAAS;AAAA,IAC3C;AAAA,EACF;AAEA,SACGC,2BAAAA,kBAAAA,IAAA,OAAA,EAAI,KAAK,YAAY,OACpB,UAAAA,2BAAA,kBAAA;AAAA,IAACC,eAAA;AAAA,IAAA;AAAA,MACC,mBAAmB;AAAA,MACnB,WAAW,EAAE,GAAG,YAAY,GAAG,UAAU;AAAA,MACzC,UAAU,MAAM;AAAA,MACf,GAAG;AAAA,IAAA;AAAA,EAAA,GAER;AAEJ;;"}

package/dist/shared/src/components/ReviewablesList/SortableReviewableCard.es.js CHANGED Viewed

@@ -71,6 +71,7 @@ import "../../api/queries/userDashboard/getUserDashboard.es.js";
 import "../../api/queries/users/getUsers.es.js";
 import "../../api/queries/users/updateUsers.es.js";
 import "../../api/queries/watchers/getWatchers.es.js";
+import "../../api/queries/permissions/getPermissions.es.js";
 import "react";
 import "@dnd-kit/core";
 import "./ReviewablesList.styled.es.js";
@@ -87,6 +88,8 @@ import "../../context/SettingsPanelContext.es.js";
 import "../../context/pip/PiPProvider.es.js";
 import "react-dom";
 import "../../context/pip/PiPWrapper.es.js";
+import "../../context/AddonProjectContext.es.js";
+import "../../context/AddonContext.es.js";
 import { ReviewableCard } from "../ReviewableCard/ReviewableCard.es.js";
 import "../ReviewableProgressCard/ReviewableProgressCard.styled.es.js";
 import "../FileThumbnail/FileThumbnail.es.js";
@@ -129,6 +132,7 @@ import "../../containers/ProjectTreeTable/context/ColumnSettingsContext.es.js";
 import "../../containers/ProjectTreeTable/context/CellEditingContext.es.js";
 import "../../containers/ProjectTreeTable/context/ClipboardContext.es.js";
 import "../../containers/ProjectTreeTable/context/ProjectTableSelectionContext.es.js";
+import "../../containers/ProjectTreeTable/context/ProjectDataContext.es.js";
 import "@tanstack/react-table";
 import "../../containers/ProjectTreeTable/widgets/CollapsedWidget.es.js";
 import "../../containers/ProjectTreeTable/widgets/DateWidget.es.js";

package/dist/shared/src/components/ReviewablesList/SortableReviewableCard.es.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SortableReviewableCard.es.js","sources":["../../../../../src/components/ReviewablesList/SortableReviewableCard.tsx"],"sourcesContent":["import { FC } from 'react'\nimport { useSortable } from '@dnd-kit/sortable'\nimport { CSS } from '@dnd-kit/utilities'\nimport { ReviewableCardProps, ReviewableCard } from '@shared/components'\n\ntype SortableReviewableCardProps = ReviewableCardProps\n\nconst SortableReviewableCard: FC<SortableReviewableCardProps> = ({ ...props }) => {\n const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({\n id: props.fileId,\n animateLayoutChanges: () => false,\n })\n\n const style = {\n transform: CSS.Transform.toString(transform),\n transition,\n }\n\n return (\n <div ref={setNodeRef} style={style}>\n <ReviewableCard\n isDropPlaceholder={isDragging}\n dragProps={{ ...attributes, ...listeners }}\n disabled={props.sortingDisabled}\n {...props}\n />\n </div>\n )\n}\n\nexport default SortableReviewableCard\n"],"names":["jsx"],"mappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~AAOA,MAAM,yBAA0D,CAAC,EAAE,GAAG,YAAY;AAC1E,QAAA,EAAE,YAAY,WAAW,YAAY,WAAW,YAAY,eAAe,YAAY;AAAA,IAC3F,IAAI,MAAM;AAAA,IACV,sBAAsB,MAAM;AAAA,EAAA,CAC7B;AAED,QAAM,QAAQ;AAAA,IACZ,WAAW,IAAI,UAAU,SAAS,SAAS;AAAA,IAC3C;AAAA,EACF;AAEA,SACGA,kCAAAA,IAAA,OAAA,EAAI,KAAK,YAAY,OACpB,UAAAA,kCAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,mBAAmB;AAAA,MACnB,WAAW,EAAE,GAAG,YAAY,GAAG,UAAU;AAAA,MACzC,UAAU,MAAM;AAAA,MACf,GAAG;AAAA,IAAA;AAAA,EAAA,GAER;AAEJ;"}
1	+ {"version":3,"file":"SortableReviewableCard.es.js","sources":["../../../../../src/components/ReviewablesList/SortableReviewableCard.tsx"],"sourcesContent":["import { FC } from 'react'\nimport { useSortable } from '@dnd-kit/sortable'\nimport { CSS } from '@dnd-kit/utilities'\nimport { ReviewableCardProps, ReviewableCard } from '@shared/components'\n\ntype SortableReviewableCardProps = ReviewableCardProps\n\nconst SortableReviewableCard: FC<SortableReviewableCardProps> = ({ ...props }) => {\n const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({\n id: props.fileId,\n animateLayoutChanges: () => false,\n })\n\n const style = {\n transform: CSS.Transform.toString(transform),\n transition,\n }\n\n return (\n <div ref={setNodeRef} style={style}>\n <ReviewableCard\n isDropPlaceholder={isDragging}\n dragProps={{ ...attributes, ...listeners }}\n disabled={props.sortingDisabled}\n {...props}\n />\n </div>\n )\n}\n\nexport default SortableReviewableCard\n"],"names":["jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAOA,MAAM,yBAA0D,CAAC,EAAE,GAAG,YAAY;AAC1E,QAAA,EAAE,YAAY,WAAW,YAAY,WAAW,YAAY,eAAe,YAAY;AAAA,IAC3F,IAAI,MAAM;AAAA,IACV,sBAAsB,MAAM;AAAA,EAAA,CAC7B;AAED,QAAM,QAAQ;AAAA,IACZ,WAAW,IAAI,UAAU,SAAS,SAAS;AAAA,IAC3C;AAAA,EACF;AAEA,SACGA,kCAAAA,IAAA,OAAA,EAAI,KAAK,YAAY,OACpB,UAAAA,kCAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,mBAAmB;AAAA,MACnB,WAAW,EAAE,GAAG,YAAY,GAAG,UAAU;AAAA,MACzC,UAAU,MAAM;AAAA,MACf,GAAG;AAAA,IAAA;AAAA,EAAA,GAER;AAEJ;"}

package/dist/shared/src/components/SettingsPanel/SettingsPanel.cjs.js CHANGED Viewed

@@ -10,6 +10,8 @@ const SettingsPanelContext = require("../../context/SettingsPanelContext.cjs.js"
 require("../../context/pip/PiPProvider.cjs.js");
 require("react-dom");
 require("../../context/pip/PiPWrapper.cjs.js");
+require("../../context/AddonProjectContext.cjs.js");
+require("../../context/AddonContext.cjs.js");
 const SidePanel = styled.div`
   height: 100%;
   overflow: hidden;

package/dist/shared/src/components/SettingsPanel/SettingsPanel.cjs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SettingsPanel.cjs.js","sources":["../../../../../src/components/SettingsPanel/SettingsPanel.tsx"],"sourcesContent":["import { Button, Icon } from '@ynput/ayon-react-components'\nimport { FC, ReactNode } from 'react'\nimport styled from 'styled-components'\nimport { SettingField, useSettingsPanel } from '@shared/context'\n\n// Side panel styled components\nconst SidePanel = styled.div<{ open: boolean }>`\n height: 100%;\n overflow: hidden;\n background-color: var(--md-sys-color-surface-container-low);\n border-radius: 4px;\n z-index: 10;\n display: flex;\n flex-direction: column;\n`\n\nconst PanelHeader = styled.div`\n display: flex;\n align-items: center;\n gap: var(--base-gap-small);\n height: 34px;\n padding: 0px 4px;\n border-bottom: 1px solid var(--md-sys-color-outline-variant);\n\n h3 {\n margin-left: 4px;\n padding: 0;\n }\n`\n\nconst ToolButton = styled(Button)`\n padding: 4px !important;\n`\n\nconst PanelTitle = styled.h3`\n margin: 0;\n flex: 1;\n`\n\nconst PanelContent = styled.div`\n padding: 8px;\n flex: 1;\n overflow-y: auto;\n`\n\nexport const SettingOption = styled(Button)`\n width: 100%;\n justify-content: flex-start;\n margin-bottom: 8px;\n text-align: left;\n display: flex;\n gap: var(--base-gap-small);\n\n .title {\n flex: 1;\n }\n\n .preview {\n color: var(--md-sys-color-outline);\n }\n`\n\nexport interface SettingConfig {\n id: SettingField\n title: string\n component: ReactNode\n icon?: string\n preview?: string \| number\n}\n\nexport interface SettingsPanelProps {\n settings: SettingConfig[]\n}\n\nexport const SettingsPanel: FC<SettingsPanelProps> = ({ settings }) => {\n const { isPanelOpen, selectedSetting, closePanel, backToMainMenu, selectSetting } =\n useSettingsPanel()\n\n const getPanelTitle = () => {\n if (!selectedSetting) return 'Settings'\n const setting = settings.find((s) => s.id === selectedSetting)\n return setting?.title \|\| 'Settings'\n }\n\n const renderSettingContent = () => {\n if (!selectedSetting) {\n // Render main menu\n return (\n <>\n {settings.map((setting) => (\n <SettingOption\n key={setting.id}\n onClick={() => selectSetting(setting.id)}\n variant=\"text\"\n >\n {setting.icon && <Icon icon={setting.icon} />}\n <span className=\"title\">{setting.title}</span>\n {!!setting.preview?.toString() && <span className=\"preview\">{setting.preview}</span>}\n </SettingOption>\n ))}\n </>\n )\n }\n\n const setting = settings.find((s) => s.id === selectedSetting)\n return setting?.component\n }\n\n return (\n <SidePanel open={isPanelOpen}>\n <PanelHeader>\n {selectedSetting && settings.length > 1 && (\n <ToolButton variant=\"text\" icon=\"arrow_back\" onClick={backToMainMenu} />\n )}\n <PanelTitle>{getPanelTitle()}</PanelTitle>\n <ToolButton variant=\"text\" icon=\"close\" onClick={closePanel} />\n </PanelHeader>\n <PanelContent>{renderSettingContent()}</PanelContent>\n </SidePanel>\n )\n}\n"],"names":["Button","useSettingsPanel","jsx","Fragment","setting","jsxs","Icon"],"mappings":"~~;;;;;;;;;;;;~~AAMA,MAAM,YAAY,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAUzB,MAAM,cAAc,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAc3B,MAAM,aAAa,OAAOA,0BAAM;AAAA;AAAA;AAIhC,MAAM,aAAa,OAAO;AAAA;AAAA;AAAA;AAK1B,MAAM,eAAe,OAAO;AAAA;AAAA;AAAA;AAAA;AAMf,MAAA,gBAAgB,OAAOA,0BAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA6BnC,MAAM,gBAAwC,CAAC,EAAE,eAAe;AACrE,QAAM,EAAE,aAAa,iBAAiB,YAAY,gBAAgB,kBAChEC,sCAAiB;AAEnB,QAAM,gBAAgB,MAAM;AACtB,QAAA,CAAC,gBAAwB,QAAA;AAC7B,UAAM,UAAU,SAAS,KAAK,CAAC,MAAM,EAAE,OAAO,eAAe;AAC7D,YAAO,mCAAS,UAAS;AAAA,EAC3B;AAEA,QAAM,uBAAuB,MAAM;AACjC,QAAI,CAAC,iBAAiB;AAEpB,aAEKC,2BAAAA,kBAAAA,IAAAC,WAAAA,kBAAAA,UAAA,EAAA,UAAA,SAAS,IAAI,CAACC;;AACbC,0CAAA,kBAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YAEC,SAAS,MAAM,cAAcD,SAAQ,EAAE;AAAA,YACvC,SAAQ;AAAA,YAEP,UAAA;AAAA,cAAAA,SAAQ,QAAQF,iDAACI,oBAAAA,MAAK,EAAA,MAAMF,SAAQ,MAAM;AAAA,+DAC1C,QAAK,EAAA,WAAU,SAAS,UAAAA,SAAQ,OAAM;AAAA,cACtC,CAAC,GAACA,cAAQ,YAARA,mBAAiB,eAAeF,2BAAA,kBAAA,IAAA,QAAA,EAAK,WAAU,WAAW,UAAAE,SAAQ,QAAQ,CAAA;AAAA,YAAA;AAAA,UAAA;AAAA,UANxEA,SAAQ;AAAA,QAQhB;AAAA,OAAA,GACH;AAAA,IAAA;AAIJ,UAAM,UAAU,SAAS,KAAK,CAAC,MAAM,EAAE,OAAO,eAAe;AAC7D,WAAO,mCAAS;AAAA,EAClB;AAGE,SAAAC,2BAAA,kBAAA,KAAC,WAAU,EAAA,MAAM,aACf,UAAA;AAAA,IAAAA,kDAAC,aACE,EAAA,UAAA;AAAA,MAAmB,mBAAA,SAAS,SAAS,KACnCH,2BAAA,kBAAA,IAAA,YAAA,EAAW,SAAQ,QAAO,MAAK,cAAa,SAAS,eAAgB,CAAA;AAAA,MAExEA,2BAAAA,kBAAAA,IAAC,YAAY,EAAA,UAAA,cAAgB,EAAA,CAAA;AAAA,uDAC5B,YAAW,EAAA,SAAQ,QAAO,MAAK,SAAQ,SAAS,WAAY,CAAA;AAAA,IAAA,GAC/D;AAAA,IACAA,2BAAAA,kBAAAA,IAAC,cAAc,EAAA,UAAA,qBAAA,EAAuB,CAAA;AAAA,EAAA,GACxC;AAEJ;;;"}
1	+ {"version":3,"file":"SettingsPanel.cjs.js","sources":["../../../../../src/components/SettingsPanel/SettingsPanel.tsx"],"sourcesContent":["import { Button, Icon } from '@ynput/ayon-react-components'\nimport { FC, ReactNode } from 'react'\nimport styled from 'styled-components'\nimport { SettingField, useSettingsPanel } from '@shared/context'\n\n// Side panel styled components\nconst SidePanel = styled.div<{ open: boolean }>`\n height: 100%;\n overflow: hidden;\n background-color: var(--md-sys-color-surface-container-low);\n border-radius: 4px;\n z-index: 10;\n display: flex;\n flex-direction: column;\n`\n\nconst PanelHeader = styled.div`\n display: flex;\n align-items: center;\n gap: var(--base-gap-small);\n height: 34px;\n padding: 0px 4px;\n border-bottom: 1px solid var(--md-sys-color-outline-variant);\n\n h3 {\n margin-left: 4px;\n padding: 0;\n }\n`\n\nconst ToolButton = styled(Button)`\n padding: 4px !important;\n`\n\nconst PanelTitle = styled.h3`\n margin: 0;\n flex: 1;\n`\n\nconst PanelContent = styled.div`\n padding: 8px;\n flex: 1;\n overflow-y: auto;\n`\n\nexport const SettingOption = styled(Button)`\n width: 100%;\n justify-content: flex-start;\n margin-bottom: 8px;\n text-align: left;\n display: flex;\n gap: var(--base-gap-small);\n\n .title {\n flex: 1;\n }\n\n .preview {\n color: var(--md-sys-color-outline);\n }\n`\n\nexport interface SettingConfig {\n id: SettingField\n title: string\n component: ReactNode\n icon?: string\n preview?: string \| number\n}\n\nexport interface SettingsPanelProps {\n settings: SettingConfig[]\n}\n\nexport const SettingsPanel: FC<SettingsPanelProps> = ({ settings }) => {\n const { isPanelOpen, selectedSetting, closePanel, backToMainMenu, selectSetting } =\n useSettingsPanel()\n\n const getPanelTitle = () => {\n if (!selectedSetting) return 'Settings'\n const setting = settings.find((s) => s.id === selectedSetting)\n return setting?.title \|\| 'Settings'\n }\n\n const renderSettingContent = () => {\n if (!selectedSetting) {\n // Render main menu\n return (\n <>\n {settings.map((setting) => (\n <SettingOption\n key={setting.id}\n onClick={() => selectSetting(setting.id)}\n variant=\"text\"\n >\n {setting.icon && <Icon icon={setting.icon} />}\n <span className=\"title\">{setting.title}</span>\n {!!setting.preview?.toString() && <span className=\"preview\">{setting.preview}</span>}\n </SettingOption>\n ))}\n </>\n )\n }\n\n const setting = settings.find((s) => s.id === selectedSetting)\n return setting?.component\n }\n\n return (\n <SidePanel open={isPanelOpen}>\n <PanelHeader>\n {selectedSetting && settings.length > 1 && (\n <ToolButton variant=\"text\" icon=\"arrow_back\" onClick={backToMainMenu} />\n )}\n <PanelTitle>{getPanelTitle()}</PanelTitle>\n <ToolButton variant=\"text\" icon=\"close\" onClick={closePanel} />\n </PanelHeader>\n <PanelContent>{renderSettingContent()}</PanelContent>\n </SidePanel>\n )\n}\n"],"names":["Button","useSettingsPanel","jsx","Fragment","setting","jsxs","Icon"],"mappings":";;;;;;;;;;;;;;AAMA,MAAM,YAAY,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAUzB,MAAM,cAAc,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAc3B,MAAM,aAAa,OAAOA,0BAAM;AAAA;AAAA;AAIhC,MAAM,aAAa,OAAO;AAAA;AAAA;AAAA;AAK1B,MAAM,eAAe,OAAO;AAAA;AAAA;AAAA;AAAA;AAMf,MAAA,gBAAgB,OAAOA,0BAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA6BnC,MAAM,gBAAwC,CAAC,EAAE,eAAe;AACrE,QAAM,EAAE,aAAa,iBAAiB,YAAY,gBAAgB,kBAChEC,sCAAiB;AAEnB,QAAM,gBAAgB,MAAM;AACtB,QAAA,CAAC,gBAAwB,QAAA;AAC7B,UAAM,UAAU,SAAS,KAAK,CAAC,MAAM,EAAE,OAAO,eAAe;AAC7D,YAAO,mCAAS,UAAS;AAAA,EAC3B;AAEA,QAAM,uBAAuB,MAAM;AACjC,QAAI,CAAC,iBAAiB;AAEpB,aAEKC,2BAAAA,kBAAAA,IAAAC,WAAAA,kBAAAA,UAAA,EAAA,UAAA,SAAS,IAAI,CAACC;;AACbC,0CAAA,kBAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YAEC,SAAS,MAAM,cAAcD,SAAQ,EAAE;AAAA,YACvC,SAAQ;AAAA,YAEP,UAAA;AAAA,cAAAA,SAAQ,QAAQF,iDAACI,oBAAAA,MAAK,EAAA,MAAMF,SAAQ,MAAM;AAAA,+DAC1C,QAAK,EAAA,WAAU,SAAS,UAAAA,SAAQ,OAAM;AAAA,cACtC,CAAC,GAACA,cAAQ,YAARA,mBAAiB,eAAeF,2BAAA,kBAAA,IAAA,QAAA,EAAK,WAAU,WAAW,UAAAE,SAAQ,QAAQ,CAAA;AAAA,YAAA;AAAA,UAAA;AAAA,UANxEA,SAAQ;AAAA,QAQhB;AAAA,OAAA,GACH;AAAA,IAAA;AAIJ,UAAM,UAAU,SAAS,KAAK,CAAC,MAAM,EAAE,OAAO,eAAe;AAC7D,WAAO,mCAAS;AAAA,EAClB;AAGE,SAAAC,2BAAA,kBAAA,KAAC,WAAU,EAAA,MAAM,aACf,UAAA;AAAA,IAAAA,kDAAC,aACE,EAAA,UAAA;AAAA,MAAmB,mBAAA,SAAS,SAAS,KACnCH,2BAAA,kBAAA,IAAA,YAAA,EAAW,SAAQ,QAAO,MAAK,cAAa,SAAS,eAAgB,CAAA;AAAA,MAExEA,2BAAAA,kBAAAA,IAAC,YAAY,EAAA,UAAA,cAAgB,EAAA,CAAA;AAAA,uDAC5B,YAAW,EAAA,SAAQ,QAAO,MAAK,SAAQ,SAAS,WAAY,CAAA;AAAA,IAAA,GAC/D;AAAA,IACAA,2BAAAA,kBAAAA,IAAC,cAAc,EAAA,UAAA,qBAAA,EAAuB,CAAA;AAAA,EAAA,GACxC;AAEJ;;;"}

package/dist/shared/src/components/SettingsPanel/SettingsPanel.es.js CHANGED Viewed

@@ -8,6 +8,8 @@ import { useSettingsPanel } from "../../context/SettingsPanelContext.es.js";
 import "../../context/pip/PiPProvider.es.js";
 import "react-dom";
 import "../../context/pip/PiPWrapper.es.js";
+import "../../context/AddonProjectContext.es.js";
+import "../../context/AddonContext.es.js";
 const SidePanel = styled.div`
   height: 100%;
   overflow: hidden;

package/dist/shared/src/components/SettingsPanel/SettingsPanel.es.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SettingsPanel.es.js","sources":["../../../../../src/components/SettingsPanel/SettingsPanel.tsx"],"sourcesContent":["import { Button, Icon } from '@ynput/ayon-react-components'\nimport { FC, ReactNode } from 'react'\nimport styled from 'styled-components'\nimport { SettingField, useSettingsPanel } from '@shared/context'\n\n// Side panel styled components\nconst SidePanel = styled.div<{ open: boolean }>`\n height: 100%;\n overflow: hidden;\n background-color: var(--md-sys-color-surface-container-low);\n border-radius: 4px;\n z-index: 10;\n display: flex;\n flex-direction: column;\n`\n\nconst PanelHeader = styled.div`\n display: flex;\n align-items: center;\n gap: var(--base-gap-small);\n height: 34px;\n padding: 0px 4px;\n border-bottom: 1px solid var(--md-sys-color-outline-variant);\n\n h3 {\n margin-left: 4px;\n padding: 0;\n }\n`\n\nconst ToolButton = styled(Button)`\n padding: 4px !important;\n`\n\nconst PanelTitle = styled.h3`\n margin: 0;\n flex: 1;\n`\n\nconst PanelContent = styled.div`\n padding: 8px;\n flex: 1;\n overflow-y: auto;\n`\n\nexport const SettingOption = styled(Button)`\n width: 100%;\n justify-content: flex-start;\n margin-bottom: 8px;\n text-align: left;\n display: flex;\n gap: var(--base-gap-small);\n\n .title {\n flex: 1;\n }\n\n .preview {\n color: var(--md-sys-color-outline);\n }\n`\n\nexport interface SettingConfig {\n id: SettingField\n title: string\n component: ReactNode\n icon?: string\n preview?: string \| number\n}\n\nexport interface SettingsPanelProps {\n settings: SettingConfig[]\n}\n\nexport const SettingsPanel: FC<SettingsPanelProps> = ({ settings }) => {\n const { isPanelOpen, selectedSetting, closePanel, backToMainMenu, selectSetting } =\n useSettingsPanel()\n\n const getPanelTitle = () => {\n if (!selectedSetting) return 'Settings'\n const setting = settings.find((s) => s.id === selectedSetting)\n return setting?.title \|\| 'Settings'\n }\n\n const renderSettingContent = () => {\n if (!selectedSetting) {\n // Render main menu\n return (\n <>\n {settings.map((setting) => (\n <SettingOption\n key={setting.id}\n onClick={() => selectSetting(setting.id)}\n variant=\"text\"\n >\n {setting.icon && <Icon icon={setting.icon} />}\n <span className=\"title\">{setting.title}</span>\n {!!setting.preview?.toString() && <span className=\"preview\">{setting.preview}</span>}\n </SettingOption>\n ))}\n </>\n )\n }\n\n const setting = settings.find((s) => s.id === selectedSetting)\n return setting?.component\n }\n\n return (\n <SidePanel open={isPanelOpen}>\n <PanelHeader>\n {selectedSetting && settings.length > 1 && (\n <ToolButton variant=\"text\" icon=\"arrow_back\" onClick={backToMainMenu} />\n )}\n <PanelTitle>{getPanelTitle()}</PanelTitle>\n <ToolButton variant=\"text\" icon=\"close\" onClick={closePanel} />\n </PanelHeader>\n <PanelContent>{renderSettingContent()}</PanelContent>\n </SidePanel>\n )\n}\n"],"names":["jsx","Fragment","setting","jsxs"],"mappings":"~~;;;;;;;;;;~~AAMA,MAAM,YAAY,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAUzB,MAAM,cAAc,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAc3B,MAAM,aAAa,OAAO,MAAM;AAAA;AAAA;AAIhC,MAAM,aAAa,OAAO;AAAA;AAAA;AAAA;AAK1B,MAAM,eAAe,OAAO;AAAA;AAAA;AAAA;AAAA;AAMf,MAAA,gBAAgB,OAAO,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA6BnC,MAAM,gBAAwC,CAAC,EAAE,eAAe;AACrE,QAAM,EAAE,aAAa,iBAAiB,YAAY,gBAAgB,kBAChE,iBAAiB;AAEnB,QAAM,gBAAgB,MAAM;AACtB,QAAA,CAAC,gBAAwB,QAAA;AAC7B,UAAM,UAAU,SAAS,KAAK,CAAC,MAAM,EAAE,OAAO,eAAe;AAC7D,YAAO,mCAAS,UAAS;AAAA,EAC3B;AAEA,QAAM,uBAAuB,MAAM;AACjC,QAAI,CAAC,iBAAiB;AAEpB,aAEKA,kCAAAA,IAAAC,kBAAAA,UAAA,EAAA,UAAA,SAAS,IAAI,CAACC;;AACbC,iDAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YAEC,SAAS,MAAM,cAAcD,SAAQ,EAAE;AAAA,YACvC,SAAQ;AAAA,YAEP,UAAA;AAAA,cAAAA,SAAQ,QAAQF,sCAAC,MAAK,EAAA,MAAME,SAAQ,MAAM;AAAA,oDAC1C,QAAK,EAAA,WAAU,SAAS,UAAAA,SAAQ,OAAM;AAAA,cACtC,CAAC,GAACA,cAAQ,YAARA,mBAAiB,eAAeF,kCAAA,IAAA,QAAA,EAAK,WAAU,WAAW,UAAAE,SAAQ,QAAQ,CAAA;AAAA,YAAA;AAAA,UAAA;AAAA,UANxEA,SAAQ;AAAA,QAQhB;AAAA,OAAA,GACH;AAAA,IAAA;AAIJ,UAAM,UAAU,SAAS,KAAK,CAAC,MAAM,EAAE,OAAO,eAAe;AAC7D,WAAO,mCAAS;AAAA,EAClB;AAGE,SAAAC,kCAAA,KAAC,WAAU,EAAA,MAAM,aACf,UAAA;AAAA,IAAAA,uCAAC,aACE,EAAA,UAAA;AAAA,MAAmB,mBAAA,SAAS,SAAS,KACnCH,kCAAA,IAAA,YAAA,EAAW,SAAQ,QAAO,MAAK,cAAa,SAAS,eAAgB,CAAA;AAAA,MAExEA,kCAAAA,IAAC,YAAY,EAAA,UAAA,cAAgB,EAAA,CAAA;AAAA,4CAC5B,YAAW,EAAA,SAAQ,QAAO,MAAK,SAAQ,SAAS,WAAY,CAAA;AAAA,IAAA,GAC/D;AAAA,IACAA,kCAAAA,IAAC,cAAc,EAAA,UAAA,qBAAA,EAAuB,CAAA;AAAA,EAAA,GACxC;AAEJ;"}
1	+ {"version":3,"file":"SettingsPanel.es.js","sources":["../../../../../src/components/SettingsPanel/SettingsPanel.tsx"],"sourcesContent":["import { Button, Icon } from '@ynput/ayon-react-components'\nimport { FC, ReactNode } from 'react'\nimport styled from 'styled-components'\nimport { SettingField, useSettingsPanel } from '@shared/context'\n\n// Side panel styled components\nconst SidePanel = styled.div<{ open: boolean }>`\n height: 100%;\n overflow: hidden;\n background-color: var(--md-sys-color-surface-container-low);\n border-radius: 4px;\n z-index: 10;\n display: flex;\n flex-direction: column;\n`\n\nconst PanelHeader = styled.div`\n display: flex;\n align-items: center;\n gap: var(--base-gap-small);\n height: 34px;\n padding: 0px 4px;\n border-bottom: 1px solid var(--md-sys-color-outline-variant);\n\n h3 {\n margin-left: 4px;\n padding: 0;\n }\n`\n\nconst ToolButton = styled(Button)`\n padding: 4px !important;\n`\n\nconst PanelTitle = styled.h3`\n margin: 0;\n flex: 1;\n`\n\nconst PanelContent = styled.div`\n padding: 8px;\n flex: 1;\n overflow-y: auto;\n`\n\nexport const SettingOption = styled(Button)`\n width: 100%;\n justify-content: flex-start;\n margin-bottom: 8px;\n text-align: left;\n display: flex;\n gap: var(--base-gap-small);\n\n .title {\n flex: 1;\n }\n\n .preview {\n color: var(--md-sys-color-outline);\n }\n`\n\nexport interface SettingConfig {\n id: SettingField\n title: string\n component: ReactNode\n icon?: string\n preview?: string \| number\n}\n\nexport interface SettingsPanelProps {\n settings: SettingConfig[]\n}\n\nexport const SettingsPanel: FC<SettingsPanelProps> = ({ settings }) => {\n const { isPanelOpen, selectedSetting, closePanel, backToMainMenu, selectSetting } =\n useSettingsPanel()\n\n const getPanelTitle = () => {\n if (!selectedSetting) return 'Settings'\n const setting = settings.find((s) => s.id === selectedSetting)\n return setting?.title \|\| 'Settings'\n }\n\n const renderSettingContent = () => {\n if (!selectedSetting) {\n // Render main menu\n return (\n <>\n {settings.map((setting) => (\n <SettingOption\n key={setting.id}\n onClick={() => selectSetting(setting.id)}\n variant=\"text\"\n >\n {setting.icon && <Icon icon={setting.icon} />}\n <span className=\"title\">{setting.title}</span>\n {!!setting.preview?.toString() && <span className=\"preview\">{setting.preview}</span>}\n </SettingOption>\n ))}\n </>\n )\n }\n\n const setting = settings.find((s) => s.id === selectedSetting)\n return setting?.component\n }\n\n return (\n <SidePanel open={isPanelOpen}>\n <PanelHeader>\n {selectedSetting && settings.length > 1 && (\n <ToolButton variant=\"text\" icon=\"arrow_back\" onClick={backToMainMenu} />\n )}\n <PanelTitle>{getPanelTitle()}</PanelTitle>\n <ToolButton variant=\"text\" icon=\"close\" onClick={closePanel} />\n </PanelHeader>\n <PanelContent>{renderSettingContent()}</PanelContent>\n </SidePanel>\n )\n}\n"],"names":["jsx","Fragment","setting","jsxs"],"mappings":";;;;;;;;;;;;AAMA,MAAM,YAAY,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAUzB,MAAM,cAAc,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAc3B,MAAM,aAAa,OAAO,MAAM;AAAA;AAAA;AAIhC,MAAM,aAAa,OAAO;AAAA;AAAA;AAAA;AAK1B,MAAM,eAAe,OAAO;AAAA;AAAA;AAAA;AAAA;AAMf,MAAA,gBAAgB,OAAO,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA6BnC,MAAM,gBAAwC,CAAC,EAAE,eAAe;AACrE,QAAM,EAAE,aAAa,iBAAiB,YAAY,gBAAgB,kBAChE,iBAAiB;AAEnB,QAAM,gBAAgB,MAAM;AACtB,QAAA,CAAC,gBAAwB,QAAA;AAC7B,UAAM,UAAU,SAAS,KAAK,CAAC,MAAM,EAAE,OAAO,eAAe;AAC7D,YAAO,mCAAS,UAAS;AAAA,EAC3B;AAEA,QAAM,uBAAuB,MAAM;AACjC,QAAI,CAAC,iBAAiB;AAEpB,aAEKA,kCAAAA,IAAAC,kBAAAA,UAAA,EAAA,UAAA,SAAS,IAAI,CAACC;;AACbC,iDAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YAEC,SAAS,MAAM,cAAcD,SAAQ,EAAE;AAAA,YACvC,SAAQ;AAAA,YAEP,UAAA;AAAA,cAAAA,SAAQ,QAAQF,sCAAC,MAAK,EAAA,MAAME,SAAQ,MAAM;AAAA,oDAC1C,QAAK,EAAA,WAAU,SAAS,UAAAA,SAAQ,OAAM;AAAA,cACtC,CAAC,GAACA,cAAQ,YAARA,mBAAiB,eAAeF,kCAAA,IAAA,QAAA,EAAK,WAAU,WAAW,UAAAE,SAAQ,QAAQ,CAAA;AAAA,YAAA;AAAA,UAAA;AAAA,UANxEA,SAAQ;AAAA,QAQhB;AAAA,OAAA,GACH;AAAA,IAAA;AAIJ,UAAM,UAAU,SAAS,KAAK,CAAC,MAAM,EAAE,OAAO,eAAe;AAC7D,WAAO,mCAAS;AAAA,EAClB;AAGE,SAAAC,kCAAA,KAAC,WAAU,EAAA,MAAM,aACf,UAAA;AAAA,IAAAA,uCAAC,aACE,EAAA,UAAA;AAAA,MAAmB,mBAAA,SAAS,SAAS,KACnCH,kCAAA,IAAA,YAAA,EAAW,SAAQ,QAAO,MAAK,cAAa,SAAS,eAAgB,CAAA;AAAA,MAExEA,kCAAAA,IAAC,YAAY,EAAA,UAAA,cAAgB,EAAA,CAAA;AAAA,4CAC5B,YAAW,EAAA,SAAQ,QAAO,MAAK,SAAQ,SAAS,WAAY,CAAA;AAAA,IAAA,GAC/D;AAAA,IACAA,kCAAAA,IAAC,cAAc,EAAA,UAAA,qBAAA,EAAuB,CAAA;AAAA,EAAA,GACxC;AAEJ;"}

package/dist/shared/src/components/Thumbnail/StackedThumbnails.cjs.js CHANGED Viewed

@@ -12,6 +12,8 @@ require("../../context/SettingsPanelContext.cjs.js");
 require("../../context/pip/PiPProvider.cjs.js");
 require("react-dom");
 require("../../context/pip/PiPWrapper.cjs.js");
+require("../../context/AddonProjectContext.cjs.js");
+require("../../context/AddonContext.cjs.js");
 const StackedStyled = styled.div`
   display: flex;
   z-index: 10;
@@ -44,6 +46,10 @@ const StackedStyled = styled.div`
     & > * + * {
       margin-left: ${({ $length }) => `${Math.max(-20, -$length * 1.5 - 8)}px`};
     }
+    .thumbnail img {
+      object-fit: cover;
+    }
   }
 `;
 const StackedThumbnails = ({

package/dist/shared/src/components/Thumbnail/StackedThumbnails.cjs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"StackedThumbnails.cjs.js","sources":["../../../../../src/components/Thumbnail/StackedThumbnails.tsx"],"sourcesContent":["import React, { useContext } from 'react'\nimport styled, { css } from 'styled-components'\nimport { Thumbnail } from './Thumbnail'\nimport clsx from 'clsx'\nimport { ThumbnailUploadContext } from '@shared/context'\nimport { ThumbnailProps } from '@shared/components'\n\ntype StackedStyledProps = {\n $length: number\n}\n\nconst StackedStyled = styled.div<StackedStyledProps>`\n display: flex;\n z-index: 10;\n height: 100%;\n position: relative;\n overflow: hidden;\n border-radius: 8px;\n min-width: min-content;\n cursor: pointer;\n\n &.stacking {\n & > * {\n margin: unset;\n aspect-ratio: 1;\n border: solid 2px var(--md-sys-color-outline-variant);\n border-radius: 8px;\n\n span {\n font-size: 24px;\n }\n\n ${({ $length }) =>\n $length > 1 &&\n css`\n :not(:last-child) {\n box-shadow: 0 0 4px 0px black;\n }\n `}\n }\n\n /* create stacked effect /\n & > + * {\n margin-left: ${({ $length }) => `${Math.max(-20, -$length * 1.5 - 8)}px`};\n }\n }\n`\n\ntype Thumbnail = {\n id?: string\n type?: string\n projectName?: string\n icon?: string\n updatedAt?: string\n src?: string\n}\n\nexport interface StackedThumbnailsProps\n extends Omit<ThumbnailProps, 'entityType' \| 'entityId' \| 'projectName'> {\n thumbnails?: Thumbnail[]\n isLoading?: boolean\n className?: string\n style?: React.CSSProperties\n}\n\nexport const StackedThumbnails = ({\n thumbnails = [],\n isLoading,\n className,\n style,\n ...props\n}: StackedThumbnailsProps) => {\n const { onContextMenu } = useContext(ThumbnailUploadContext)\n // limit to 5 users\n thumbnails = thumbnails.slice(0, 5)\n const isStacking = thumbnails.length > 1\n\n if (!thumbnails.length) return null\n\n return (\n <StackedStyled\n $length={thumbnails.length}\n className={clsx('stacked-thumbnails', className, { stacking: isStacking })}\n >\n {thumbnails.map((thumb, i) =>\n thumb ? (\n <Thumbnail\n projectName={thumb.projectName}\n entityType={thumb.type}\n entityId={thumb.id}\n icon={thumb.icon}\n key={thumb.id \|\| thumb.src \|\| i}\n style={{ ...style, zIndex: -i }}\n entityUpdatedAt={thumb.updatedAt}\n isLoading={isLoading}\n src={thumb.src}\n // @ts-ignore\n onContextMenu={onContextMenu}\n {...props}\n />\n ) : null,\n )}\n </StackedStyled>\n )\n}\n"],"names":["css","useContext","ThumbnailUploadContext","jsx","Thumbnail"],"mappings":"~~;;;;;;;;;;;;;;~~AAWA,MAAM,gBAAgB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAqBrB,CAAC,EAAE,QAAQ,MACX,UAAU,KACVA,OAAA;AAAA;AAAA;AAAA;AAAA,SAIC;AAAA;AAAA;AAAA;AAAA;AAAA,qBAKY,CAAC,EAAE,QAAQ,MAAM,GAAG,KAAK,IAAI,KAAK,CAAC,UAAU,MAAM,CAAC,CAAC,IAAI;AAAA;AAAA;AAAA;~~AAsBvE~~,MAAM,oBAAoB,CAAC;AAAA,EAChC,aAAa,CAAC;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAA8B;AAC5B,QAAM,EAAE,cAAA,IAAkBC,MAAA,WAAWC,+CAAsB;AAE9C,eAAA,WAAW,MAAM,GAAG,CAAC;AAC5B,QAAA,aAAa,WAAW,SAAS;AAEnC,MAAA,CAAC,WAAW,OAAe,QAAA;AAG7B,SAAAC,2BAAA,kBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,SAAS,WAAW;AAAA,MACpB,WAAW,KAAK,sBAAsB,WAAW,EAAE,UAAU,YAAY;AAAA,MAExE,UAAW,WAAA;AAAA,QAAI,CAAC,OAAO,MACtB,QACEA,2BAAA,kBAAA;AAAA,UAACC,UAAA;AAAA,UAAA;AAAA,YACC,aAAa,MAAM;AAAA,YACnB,YAAY,MAAM;AAAA,YAClB,UAAU,MAAM;AAAA,YAChB,MAAM,MAAM;AAAA,YAEZ,OAAO,EAAE,GAAG,OAAO,QAAQ,CAAC,EAAE;AAAA,YAC9B,iBAAiB,MAAM;AAAA,YACvB;AAAA,YACA,KAAK,MAAM;AAAA,YAEX;AAAA,YACC,GAAG;AAAA,UAAA;AAAA,UAPC,MAAM,MAAM,MAAM,OAAO;AAAA,QAAA,IAS9B;AAAA,MAAA;AAAA,IACN;AAAA,EACF;AAEJ;;"}
1	+ {"version":3,"file":"StackedThumbnails.cjs.js","sources":["../../../../../src/components/Thumbnail/StackedThumbnails.tsx"],"sourcesContent":["import React, { useContext } from 'react'\nimport styled, { css } from 'styled-components'\nimport { Thumbnail } from './Thumbnail'\nimport clsx from 'clsx'\nimport { ThumbnailUploadContext } from '@shared/context'\nimport { ThumbnailProps } from '@shared/components'\n\ntype StackedStyledProps = {\n $length: number\n}\n\nconst StackedStyled = styled.div<StackedStyledProps>`\n display: flex;\n z-index: 10;\n height: 100%;\n position: relative;\n overflow: hidden;\n border-radius: 8px;\n min-width: min-content;\n cursor: pointer;\n\n &.stacking {\n & > * {\n margin: unset;\n aspect-ratio: 1;\n border: solid 2px var(--md-sys-color-outline-variant);\n border-radius: 8px;\n\n span {\n font-size: 24px;\n }\n\n ${({ $length }) =>\n $length > 1 &&\n css`\n :not(:last-child) {\n box-shadow: 0 0 4px 0px black;\n }\n `}\n }\n\n /* create stacked effect /\n & > + * {\n margin-left: ${({ $length }) => `${Math.max(-20, -$length * 1.5 - 8)}px`};\n }\n\n .thumbnail img {\n object-fit: cover;\n }\n }\n`\n\ntype Thumbnail = {\n id?: string\n type?: string\n projectName?: string\n icon?: string\n updatedAt?: string\n src?: string\n}\n\nexport interface StackedThumbnailsProps\n extends Omit<ThumbnailProps, 'entityType' \| 'entityId' \| 'projectName'> {\n thumbnails?: Thumbnail[]\n isLoading?: boolean\n className?: string\n style?: React.CSSProperties\n}\n\nexport const StackedThumbnails = ({\n thumbnails = [],\n isLoading,\n className,\n style,\n ...props\n}: StackedThumbnailsProps) => {\n const { onContextMenu } = useContext(ThumbnailUploadContext)\n // limit to 5 users\n thumbnails = thumbnails.slice(0, 5)\n const isStacking = thumbnails.length > 1\n\n if (!thumbnails.length) return null\n\n return (\n <StackedStyled\n $length={thumbnails.length}\n className={clsx('stacked-thumbnails', className, { stacking: isStacking })}\n >\n {thumbnails.map((thumb, i) =>\n thumb ? (\n <Thumbnail\n projectName={thumb.projectName}\n entityType={thumb.type}\n entityId={thumb.id}\n icon={thumb.icon}\n key={thumb.id \|\| thumb.src \|\| i}\n style={{ ...style, zIndex: -i }}\n entityUpdatedAt={thumb.updatedAt}\n isLoading={isLoading}\n src={thumb.src}\n // @ts-ignore\n onContextMenu={onContextMenu}\n {...props}\n />\n ) : null,\n )}\n </StackedStyled>\n )\n}\n"],"names":["css","useContext","ThumbnailUploadContext","jsx","Thumbnail"],"mappings":";;;;;;;;;;;;;;;;AAWA,MAAM,gBAAgB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAqBrB,CAAC,EAAE,QAAQ,MACX,UAAU,KACVA,OAAA;AAAA;AAAA;AAAA;AAAA,SAIC;AAAA;AAAA;AAAA;AAAA;AAAA,qBAKY,CAAC,EAAE,QAAQ,MAAM,GAAG,KAAK,IAAI,KAAK,CAAC,UAAU,MAAM,CAAC,CAAC,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA0BvE,MAAM,oBAAoB,CAAC;AAAA,EAChC,aAAa,CAAC;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAA8B;AAC5B,QAAM,EAAE,cAAA,IAAkBC,MAAA,WAAWC,+CAAsB;AAE9C,eAAA,WAAW,MAAM,GAAG,CAAC;AAC5B,QAAA,aAAa,WAAW,SAAS;AAEnC,MAAA,CAAC,WAAW,OAAe,QAAA;AAG7B,SAAAC,2BAAA,kBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,SAAS,WAAW;AAAA,MACpB,WAAW,KAAK,sBAAsB,WAAW,EAAE,UAAU,YAAY;AAAA,MAExE,UAAW,WAAA;AAAA,QAAI,CAAC,OAAO,MACtB,QACEA,2BAAA,kBAAA;AAAA,UAACC,UAAA;AAAA,UAAA;AAAA,YACC,aAAa,MAAM;AAAA,YACnB,YAAY,MAAM;AAAA,YAClB,UAAU,MAAM;AAAA,YAChB,MAAM,MAAM;AAAA,YAEZ,OAAO,EAAE,GAAG,OAAO,QAAQ,CAAC,EAAE;AAAA,YAC9B,iBAAiB,MAAM;AAAA,YACvB;AAAA,YACA,KAAK,MAAM;AAAA,YAEX;AAAA,YACC,GAAG;AAAA,UAAA;AAAA,UAPC,MAAM,MAAM,MAAM,OAAO;AAAA,QAAA,IAS9B;AAAA,MAAA;AAAA,IACN;AAAA,EACF;AAEJ;;"}

package/dist/shared/src/components/Thumbnail/StackedThumbnails.es.js CHANGED Viewed

@@ -10,6 +10,8 @@ import "../../context/SettingsPanelContext.es.js";
 import "../../context/pip/PiPProvider.es.js";
 import "react-dom";
 import "../../context/pip/PiPWrapper.es.js";
+import "../../context/AddonProjectContext.es.js";
+import "../../context/AddonContext.es.js";
 const StackedStyled = styled.div`
   display: flex;
   z-index: 10;
@@ -42,6 +44,10 @@ const StackedStyled = styled.div`
     & > * + * {
       margin-left: ${({ $length }) => `${Math.max(-20, -$length * 1.5 - 8)}px`};
     }
+    .thumbnail img {
+      object-fit: cover;
+    }
   }
 `;
 const StackedThumbnails = ({

package/dist/shared/src/components/Thumbnail/StackedThumbnails.es.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"StackedThumbnails.es.js","sources":["../../../../../src/components/Thumbnail/StackedThumbnails.tsx"],"sourcesContent":["import React, { useContext } from 'react'\nimport styled, { css } from 'styled-components'\nimport { Thumbnail } from './Thumbnail'\nimport clsx from 'clsx'\nimport { ThumbnailUploadContext } from '@shared/context'\nimport { ThumbnailProps } from '@shared/components'\n\ntype StackedStyledProps = {\n $length: number\n}\n\nconst StackedStyled = styled.div<StackedStyledProps>`\n display: flex;\n z-index: 10;\n height: 100%;\n position: relative;\n overflow: hidden;\n border-radius: 8px;\n min-width: min-content;\n cursor: pointer;\n\n &.stacking {\n & > * {\n margin: unset;\n aspect-ratio: 1;\n border: solid 2px var(--md-sys-color-outline-variant);\n border-radius: 8px;\n\n span {\n font-size: 24px;\n }\n\n ${({ $length }) =>\n $length > 1 &&\n css`\n :not(:last-child) {\n box-shadow: 0 0 4px 0px black;\n }\n `}\n }\n\n /* create stacked effect /\n & > + * {\n margin-left: ${({ $length }) => `${Math.max(-20, -$length * 1.5 - 8)}px`};\n }\n }\n`\n\ntype Thumbnail = {\n id?: string\n type?: string\n projectName?: string\n icon?: string\n updatedAt?: string\n src?: string\n}\n\nexport interface StackedThumbnailsProps\n extends Omit<ThumbnailProps, 'entityType' \| 'entityId' \| 'projectName'> {\n thumbnails?: Thumbnail[]\n isLoading?: boolean\n className?: string\n style?: React.CSSProperties\n}\n\nexport const StackedThumbnails = ({\n thumbnails = [],\n isLoading,\n className,\n style,\n ...props\n}: StackedThumbnailsProps) => {\n const { onContextMenu } = useContext(ThumbnailUploadContext)\n // limit to 5 users\n thumbnails = thumbnails.slice(0, 5)\n const isStacking = thumbnails.length > 1\n\n if (!thumbnails.length) return null\n\n return (\n <StackedStyled\n $length={thumbnails.length}\n className={clsx('stacked-thumbnails', className, { stacking: isStacking })}\n >\n {thumbnails.map((thumb, i) =>\n thumb ? (\n <Thumbnail\n projectName={thumb.projectName}\n entityType={thumb.type}\n entityId={thumb.id}\n icon={thumb.icon}\n key={thumb.id \|\| thumb.src \|\| i}\n style={{ ...style, zIndex: -i }}\n entityUpdatedAt={thumb.updatedAt}\n isLoading={isLoading}\n src={thumb.src}\n // @ts-ignore\n onContextMenu={onContextMenu}\n {...props}\n />\n ) : null,\n )}\n </StackedStyled>\n )\n}\n"],"names":["jsx"],"mappings":"~~;;;;;;;;;;;;~~AAWA,MAAM,gBAAgB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAqBrB,CAAC,EAAE,QAAQ,MACX,UAAU,KACV;AAAA;AAAA;AAAA;AAAA,SAIC;AAAA;AAAA;AAAA;AAAA;AAAA,qBAKY,CAAC,EAAE,QAAQ,MAAM,GAAG,KAAK,IAAI,KAAK,CAAC,UAAU,MAAM,CAAC,CAAC,IAAI;AAAA;AAAA;AAAA;~~AAsBvE~~,MAAM,oBAAoB,CAAC;AAAA,EAChC,aAAa,CAAC;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAA8B;AAC5B,QAAM,EAAE,cAAA,IAAkB,WAAW,sBAAsB;AAE9C,eAAA,WAAW,MAAM,GAAG,CAAC;AAC5B,QAAA,aAAa,WAAW,SAAS;AAEnC,MAAA,CAAC,WAAW,OAAe,QAAA;AAG7B,SAAAA,kCAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,SAAS,WAAW;AAAA,MACpB,WAAW,KAAK,sBAAsB,WAAW,EAAE,UAAU,YAAY;AAAA,MAExE,UAAW,WAAA;AAAA,QAAI,CAAC,OAAO,MACtB,QACEA,kCAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,aAAa,MAAM;AAAA,YACnB,YAAY,MAAM;AAAA,YAClB,UAAU,MAAM;AAAA,YAChB,MAAM,MAAM;AAAA,YAEZ,OAAO,EAAE,GAAG,OAAO,QAAQ,CAAC,EAAE;AAAA,YAC9B,iBAAiB,MAAM;AAAA,YACvB;AAAA,YACA,KAAK,MAAM;AAAA,YAEX;AAAA,YACC,GAAG;AAAA,UAAA;AAAA,UAPC,MAAM,MAAM,MAAM,OAAO;AAAA,QAAA,IAS9B;AAAA,MAAA;AAAA,IACN;AAAA,EACF;AAEJ;"}
1	+ {"version":3,"file":"StackedThumbnails.es.js","sources":["../../../../../src/components/Thumbnail/StackedThumbnails.tsx"],"sourcesContent":["import React, { useContext } from 'react'\nimport styled, { css } from 'styled-components'\nimport { Thumbnail } from './Thumbnail'\nimport clsx from 'clsx'\nimport { ThumbnailUploadContext } from '@shared/context'\nimport { ThumbnailProps } from '@shared/components'\n\ntype StackedStyledProps = {\n $length: number\n}\n\nconst StackedStyled = styled.div<StackedStyledProps>`\n display: flex;\n z-index: 10;\n height: 100%;\n position: relative;\n overflow: hidden;\n border-radius: 8px;\n min-width: min-content;\n cursor: pointer;\n\n &.stacking {\n & > * {\n margin: unset;\n aspect-ratio: 1;\n border: solid 2px var(--md-sys-color-outline-variant);\n border-radius: 8px;\n\n span {\n font-size: 24px;\n }\n\n ${({ $length }) =>\n $length > 1 &&\n css`\n :not(:last-child) {\n box-shadow: 0 0 4px 0px black;\n }\n `}\n }\n\n /* create stacked effect /\n & > + * {\n margin-left: ${({ $length }) => `${Math.max(-20, -$length * 1.5 - 8)}px`};\n }\n\n .thumbnail img {\n object-fit: cover;\n }\n }\n`\n\ntype Thumbnail = {\n id?: string\n type?: string\n projectName?: string\n icon?: string\n updatedAt?: string\n src?: string\n}\n\nexport interface StackedThumbnailsProps\n extends Omit<ThumbnailProps, 'entityType' \| 'entityId' \| 'projectName'> {\n thumbnails?: Thumbnail[]\n isLoading?: boolean\n className?: string\n style?: React.CSSProperties\n}\n\nexport const StackedThumbnails = ({\n thumbnails = [],\n isLoading,\n className,\n style,\n ...props\n}: StackedThumbnailsProps) => {\n const { onContextMenu } = useContext(ThumbnailUploadContext)\n // limit to 5 users\n thumbnails = thumbnails.slice(0, 5)\n const isStacking = thumbnails.length > 1\n\n if (!thumbnails.length) return null\n\n return (\n <StackedStyled\n $length={thumbnails.length}\n className={clsx('stacked-thumbnails', className, { stacking: isStacking })}\n >\n {thumbnails.map((thumb, i) =>\n thumb ? (\n <Thumbnail\n projectName={thumb.projectName}\n entityType={thumb.type}\n entityId={thumb.id}\n icon={thumb.icon}\n key={thumb.id \|\| thumb.src \|\| i}\n style={{ ...style, zIndex: -i }}\n entityUpdatedAt={thumb.updatedAt}\n isLoading={isLoading}\n src={thumb.src}\n // @ts-ignore\n onContextMenu={onContextMenu}\n {...props}\n />\n ) : null,\n )}\n </StackedStyled>\n )\n}\n"],"names":["jsx"],"mappings":";;;;;;;;;;;;;;AAWA,MAAM,gBAAgB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAqBrB,CAAC,EAAE,QAAQ,MACX,UAAU,KACV;AAAA;AAAA;AAAA;AAAA,SAIC;AAAA;AAAA;AAAA;AAAA;AAAA,qBAKY,CAAC,EAAE,QAAQ,MAAM,GAAG,KAAK,IAAI,KAAK,CAAC,UAAU,MAAM,CAAC,CAAC,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA0BvE,MAAM,oBAAoB,CAAC;AAAA,EAChC,aAAa,CAAC;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAA8B;AAC5B,QAAM,EAAE,cAAA,IAAkB,WAAW,sBAAsB;AAE9C,eAAA,WAAW,MAAM,GAAG,CAAC;AAC5B,QAAA,aAAa,WAAW,SAAS;AAEnC,MAAA,CAAC,WAAW,OAAe,QAAA;AAG7B,SAAAA,kCAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,SAAS,WAAW;AAAA,MACpB,WAAW,KAAK,sBAAsB,WAAW,EAAE,UAAU,YAAY;AAAA,MAExE,UAAW,WAAA;AAAA,QAAI,CAAC,OAAO,MACtB,QACEA,kCAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,aAAa,MAAM;AAAA,YACnB,YAAY,MAAM;AAAA,YAClB,UAAU,MAAM;AAAA,YAChB,MAAM,MAAM;AAAA,YAEZ,OAAO,EAAE,GAAG,OAAO,QAAQ,CAAC,EAAE;AAAA,YAC9B,iBAAiB,MAAM;AAAA,YACvB;AAAA,YACA,KAAK,MAAM;AAAA,YAEX;AAAA,YACC,GAAG;AAAA,UAAA;AAAA,UAPC,MAAM,MAAM,MAAM,OAAO;AAAA,QAAA,IAS9B;AAAA,MAAA;AAAA,IACN;AAAA,EACF;AAEJ;"}

package/dist/shared/src/components/Thumbnail/Thumbnail.styled.cjs.js CHANGED Viewed

@@ -5,7 +5,7 @@ const Card = styled.div`
   position: relative;
   width: 100%;
   height: 52px;
-  aspect-ratio: 1.77;
+  aspect-ratio: 1.7;
   overflow: hidden;
   border-radius: var(--border-radius-l);
   margin: auto;
@@ -72,12 +72,7 @@ const Card = styled.div`
     cursor: pointer;
     &:hover {
-      &.loaded:not(.error) {
-        background-color: var(--md-sys-color-on-surface);
-      }
       img {
-        opacity: 0.9;
         scale: 1.1;
       }
@@ -101,7 +96,7 @@ const Card = styled.div`
 const Image = styled.img`
   width: 100%;
   height: 100%;
-  object-fit: cover;
+  object-fit: contain;
   border-radius: var(--border-radius-m);
   overflow: hidden;

package/dist/shared/src/components/Thumbnail/Thumbnail.styled.cjs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Thumbnail.styled.cjs.js","sources":["../../../../../src/components/Thumbnail/Thumbnail.styled.ts"],"sourcesContent":["import styled from 'styled-components'\n\nexport const Card = styled.div`\n position: relative;\n width: 100%;\n height: 52px;\n aspect-ratio: 1.77;\n overflow: hidden;\n border-radius: var(--border-radius-l);\n margin: auto;\n\n background-color: var(--md-sys-color-surface-container-lowest);\n\n transition: border-color 0.2s, background-color 0.2s;\n\n &.border {\n border: solid 2px var(--md-sys-color-outline-variant);\n }\n\n /* icon /\n .icon {\n position: absolute;\n user-select: none;\n display: flex;\n justify-content: center;\n align-items: center;\n inset: 0;\n\n transition: opacity 0.2s;\n }\n\n .type-icon {\n color: var(--md-sys-color-outline);\n }\n\n .hover-icon {\n inset: unset;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n font-size: 30px;\n\n border-radius: 50%;\n\n background-color: rgba(0, 0, 0, 0.7);\n }\n\n / hide the image until it has been loaded /\n img,\n .icon {\n opacity: 0;\n }\n\n &.loaded {\n / show img if not error otherwise show icon /\n &:not(.error) {\n img {\n opacity: 1;\n }\n }\n\n / show icon if error /\n &.error {\n .type-icon {\n opacity: 1;\n }\n }\n }\n\n &.clickable {\n cursor: pointer;\n\n &:hover {\n ~~&.loaded:not(.error) {\n background-color: var(--md-sys-color-on-surface);\n }\n\n~~ img {\n ~~opacity: 0.9;\n~~ scale: 1.1;\n }\n\n / show play icon /\n .hover-icon {\n opacity: 1;\n }\n\n / if :has a hover-icon hide the type-cion /\n .type-icon {\n opacity: 0;\n }\n }\n }\n\n &.loading {\n border: none;\n border-color: transparent;\n }\n`\n\nexport const Image = styled.img`\n width: 100%;\n height: 100%;\n object-fit: ~~cover~~;\n border-radius: var(--border-radius-m);\n overflow: hidden;\n\n / ensures it always fills the parent */\n display: block;\n position: absolute;\n inset: 0;\n\n transition: scale 0.2s, opacity 0.2s;\n`\n"],"names":[],"mappings":";;;AAEO,MAAM,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;~~AAAA;AAAA;AAAA;AAAA;AAAA;AAkGpB~~,MAAM,QAAQ,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;"}
1	+ {"version":3,"file":"Thumbnail.styled.cjs.js","sources":["../../../../../src/components/Thumbnail/Thumbnail.styled.ts"],"sourcesContent":["import styled from 'styled-components'\n\nexport const Card = styled.div`\n position: relative;\n width: 100%;\n height: 52px;\n aspect-ratio: 1.7;\n overflow: hidden;\n border-radius: var(--border-radius-l);\n margin: auto;\n\n background-color: var(--md-sys-color-surface-container-lowest);\n\n transition: border-color 0.2s, background-color 0.2s;\n\n &.border {\n border: solid 2px var(--md-sys-color-outline-variant);\n }\n\n /* icon /\n .icon {\n position: absolute;\n user-select: none;\n display: flex;\n justify-content: center;\n align-items: center;\n inset: 0;\n\n transition: opacity 0.2s;\n }\n\n .type-icon {\n color: var(--md-sys-color-outline);\n }\n\n .hover-icon {\n inset: unset;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n font-size: 30px;\n\n border-radius: 50%;\n\n background-color: rgba(0, 0, 0, 0.7);\n }\n\n / hide the image until it has been loaded /\n img,\n .icon {\n opacity: 0;\n }\n\n &.loaded {\n / show img if not error otherwise show icon /\n &:not(.error) {\n img {\n opacity: 1;\n }\n }\n\n / show icon if error /\n &.error {\n .type-icon {\n opacity: 1;\n }\n }\n }\n\n &.clickable {\n cursor: pointer;\n\n &:hover {\n img {\n scale: 1.1;\n }\n\n / show play icon /\n .hover-icon {\n opacity: 1;\n }\n\n / if :has a hover-icon hide the type-cion /\n .type-icon {\n opacity: 0;\n }\n }\n }\n\n &.loading {\n border: none;\n border-color: transparent;\n }\n`\n\nexport const Image = styled.img`\n width: 100%;\n height: 100%;\n object-fit: contain;\n border-radius: var(--border-radius-m);\n overflow: hidden;\n\n / ensures it always fills the parent */\n display: block;\n position: absolute;\n inset: 0;\n\n transition: scale 0.2s, opacity 0.2s;\n`\n"],"names":[],"mappings":";;;AAEO,MAAM,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA6FpB,MAAM,QAAQ,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;"}

package/dist/shared/src/components/Thumbnail/Thumbnail.styled.es.js CHANGED Viewed

@@ -3,7 +3,7 @@ const Card = styled.div`
   position: relative;
   width: 100%;
   height: 52px;
-  aspect-ratio: 1.77;
+  aspect-ratio: 1.7;
   overflow: hidden;
   border-radius: var(--border-radius-l);
   margin: auto;
@@ -70,12 +70,7 @@ const Card = styled.div`
     cursor: pointer;
     &:hover {
-      &.loaded:not(.error) {
-        background-color: var(--md-sys-color-on-surface);
-      }
       img {
-        opacity: 0.9;
         scale: 1.1;
       }
@@ -99,7 +94,7 @@ const Card = styled.div`
 const Image = styled.img`
   width: 100%;
   height: 100%;
-  object-fit: cover;
+  object-fit: contain;
   border-radius: var(--border-radius-m);
   overflow: hidden;

package/dist/shared/src/components/Thumbnail/Thumbnail.styled.es.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Thumbnail.styled.es.js","sources":["../../../../../src/components/Thumbnail/Thumbnail.styled.ts"],"sourcesContent":["import styled from 'styled-components'\n\nexport const Card = styled.div`\n position: relative;\n width: 100%;\n height: 52px;\n aspect-ratio: 1.77;\n overflow: hidden;\n border-radius: var(--border-radius-l);\n margin: auto;\n\n background-color: var(--md-sys-color-surface-container-lowest);\n\n transition: border-color 0.2s, background-color 0.2s;\n\n &.border {\n border: solid 2px var(--md-sys-color-outline-variant);\n }\n\n /* icon /\n .icon {\n position: absolute;\n user-select: none;\n display: flex;\n justify-content: center;\n align-items: center;\n inset: 0;\n\n transition: opacity 0.2s;\n }\n\n .type-icon {\n color: var(--md-sys-color-outline);\n }\n\n .hover-icon {\n inset: unset;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n font-size: 30px;\n\n border-radius: 50%;\n\n background-color: rgba(0, 0, 0, 0.7);\n }\n\n / hide the image until it has been loaded /\n img,\n .icon {\n opacity: 0;\n }\n\n &.loaded {\n / show img if not error otherwise show icon /\n &:not(.error) {\n img {\n opacity: 1;\n }\n }\n\n / show icon if error /\n &.error {\n .type-icon {\n opacity: 1;\n }\n }\n }\n\n &.clickable {\n cursor: pointer;\n\n &:hover {\n ~~&.loaded:not(.error) {\n background-color: var(--md-sys-color-on-surface);\n }\n\n~~ img {\n ~~opacity: 0.9;\n~~ scale: 1.1;\n }\n\n / show play icon /\n .hover-icon {\n opacity: 1;\n }\n\n / if :has a hover-icon hide the type-cion /\n .type-icon {\n opacity: 0;\n }\n }\n }\n\n &.loading {\n border: none;\n border-color: transparent;\n }\n`\n\nexport const Image = styled.img`\n width: 100%;\n height: 100%;\n object-fit: ~~cover~~;\n border-radius: var(--border-radius-m);\n overflow: hidden;\n\n / ensures it always fills the parent */\n display: block;\n position: absolute;\n inset: 0;\n\n transition: scale 0.2s, opacity 0.2s;\n`\n"],"names":[],"mappings":";AAEO,MAAM,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;~~AAAA;AAAA;AAAA;AAAA;AAAA;AAkGpB~~,MAAM,QAAQ,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;"}
1	+ {"version":3,"file":"Thumbnail.styled.es.js","sources":["../../../../../src/components/Thumbnail/Thumbnail.styled.ts"],"sourcesContent":["import styled from 'styled-components'\n\nexport const Card = styled.div`\n position: relative;\n width: 100%;\n height: 52px;\n aspect-ratio: 1.7;\n overflow: hidden;\n border-radius: var(--border-radius-l);\n margin: auto;\n\n background-color: var(--md-sys-color-surface-container-lowest);\n\n transition: border-color 0.2s, background-color 0.2s;\n\n &.border {\n border: solid 2px var(--md-sys-color-outline-variant);\n }\n\n /* icon /\n .icon {\n position: absolute;\n user-select: none;\n display: flex;\n justify-content: center;\n align-items: center;\n inset: 0;\n\n transition: opacity 0.2s;\n }\n\n .type-icon {\n color: var(--md-sys-color-outline);\n }\n\n .hover-icon {\n inset: unset;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n font-size: 30px;\n\n border-radius: 50%;\n\n background-color: rgba(0, 0, 0, 0.7);\n }\n\n / hide the image until it has been loaded /\n img,\n .icon {\n opacity: 0;\n }\n\n &.loaded {\n / show img if not error otherwise show icon /\n &:not(.error) {\n img {\n opacity: 1;\n }\n }\n\n / show icon if error /\n &.error {\n .type-icon {\n opacity: 1;\n }\n }\n }\n\n &.clickable {\n cursor: pointer;\n\n &:hover {\n img {\n scale: 1.1;\n }\n\n / show play icon /\n .hover-icon {\n opacity: 1;\n }\n\n / if :has a hover-icon hide the type-cion /\n .type-icon {\n opacity: 0;\n }\n }\n }\n\n &.loading {\n border: none;\n border-color: transparent;\n }\n`\n\nexport const Image = styled.img`\n width: 100%;\n height: 100%;\n object-fit: contain;\n border-radius: var(--border-radius-m);\n overflow: hidden;\n\n / ensures it always fills the parent */\n display: block;\n position: absolute;\n inset: 0;\n\n transition: scale 0.2s, opacity 0.2s;\n`\n"],"names":[],"mappings":";AAEO,MAAM,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA6FpB,MAAM,QAAQ,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;"}