Asset Preview

assets/build/api/openapi-config.ts

@@ -15,13 +15,13 @@ import { type ConfigFile } from '@rtk-query/codegen-openapi'
 
 const config: ConfigFile = {
   schemaFile: './docs.jsonopenapi.json',
-  apiFile: '../js/src/app/api/pimcore/index.ts',
+  apiFile: '../../js/src/core/app/api/pimcore/index.ts',
   apiImport: 'api',
   outputFiles: {
-    '../js/modules/asset/asset-api-slice.gen.ts': {
+    '../../js/src/core/modules/asset/asset-api-slice.gen.ts': {
       filterEndpoints: [/asset/i]
     },
-    '../js/modules/app/translations/translations-api-slice.gen.ts': {
+    '../../js/src/core/modules/app/translations/translations-api-slice.gen.ts': {
       filterEndpoints: [/translation/i]
     }
   },

assets/js/src/core/app/config/services/index.ts

@@ -12,21 +12,27 @@
 */
 
 import { container } from '@Pimcore/app/depency-injection'
-import { FolderTabManager } from '@Pimcore/modules/asset/editor/folder/tab-manager/folder-tab-manager'
+import { FolderTabManager } from '@Pimcore/modules/asset/editor/types/folder/tab-manager/folder-tab-manager'
 import { ComponentRegistryService } from '@Pimcore/modules/asset/editor/services/component-registry'
 import { IconLibrary } from '@Pimcore/modules/icon-library/services/icon-library'
 import { WidgetRegistry } from '@Pimcore/modules/widget-manager/services/widget-registry'
-import { ImageTabManager } from '@Pimcore/modules/asset/editor/image/tab-manager/image-tab-manager'
+import { ImageTabManager } from '@Pimcore/modules/asset/editor/types/image/tab-manager/image-tab-manager'
 import { TypeRegistry } from '@Pimcore/components/grid/services/type-registry'
+import { TextTabManager } from '@Pimcore/modules/asset/editor/types/text/tab-manager/text-tab-manager'
+import { DocumentTabManager } from '@Pimcore/modules/asset/editor/types/document/tab-manager/document-tab-manager'
+import { VideoTabManager } from '@Pimcore/modules/asset/editor/types/video/tab-manager/video-tab-manager'
 
 export const serviceIds = {
   // Widget manager
   widgetManager: 'WidgetManagerService',
 
   // Assets
   'Asset/Editor/ComponentRegistry': 'Asset/Editor/ComponentRegistry',
+  'Asset/Editor/DocumentTabManager': 'Asset/Editor/DocumentTabManager',
   'Asset/Editor/FolderTabManager': 'Asset/Editor/FolderTabManager',
   'Asset/Editor/ImageTabManager': 'Asset/Editor/ImageTabManager',
+  'Asset/Editor/TextTabManager': 'Asset/Editor/TextTabManager',
+  'Asset/Editor/VideoTabManager': 'Asset/Editor/VideoTabManager',
 
   // icon library
   iconLibrary: 'IconLibrary',
@@ -40,8 +46,12 @@ container.bind(serviceIds.widgetManager).to(WidgetRegistry).inSingletonScope()
 
 // Assets
 container.bind(serviceIds['Asset/Editor/ComponentRegistry']).to(ComponentRegistryService).inSingletonScope()
+
+container.bind(serviceIds['Asset/Editor/DocumentTabManager']).to(DocumentTabManager).inSingletonScope()
 container.bind(serviceIds['Asset/Editor/FolderTabManager']).to(FolderTabManager).inSingletonScope()
 container.bind(serviceIds['Asset/Editor/ImageTabManager']).to(ImageTabManager).inSingletonScope()
+container.bind(serviceIds['Asset/Editor/TextTabManager']).to(TextTabManager).inSingletonScope()
+container.bind(serviceIds['Asset/Editor/VideoTabManager']).to(VideoTabManager).inSingletonScope()
 
 // Icon library
 container.bind(serviceIds.iconLibrary).to(IconLibrary).inSingletonScope()

assets/js/src/core/components/pimcore-document/pimcore-document.stories.tsx

@@ -0,0 +1,32 @@
+/**
+* Pimcore
+*
+* This source file is available under two different licenses:
+* - Pimcore Open Core License (POCL)
+* - Pimcore Commercial License (PCL)
+* Full copyright and license information is available in
+* LICENSE.md which is distributed with this source code.
+*
+*  @copyright  Copyright (c) Pimcore GmbH (http://www.pimcore.org)
+*  @license    https://github.com/pimcore/studio-ui-bundle/blob/1.x/LICENSE.md POCL and PCL
+*/
+
+import { type Meta } from '@storybook/react'
+import { PimcoreDocument as PimcoreDocumentComponent } from './pimcore-document'
+
+const config: Meta = {
+  title: 'Pimcore studio/UI/PimcoreDocument',
+  component: PimcoreDocumentComponent,
+  parameters: {
+    layout: 'centered'
+  },
+  tags: ['autodocs']
+}
+
+export default config
+
+export const _default = {
+  args: {
+    src: 'http://localhost/Sample Content/Documents/classic-car-2016-3857.pdf'
+  }
+}

assets/js/src/core/components/pimcore-document/pimcore-document.styles.tsx

@@ -0,0 +1,32 @@
+/**
+* Pimcore
+*
+* This source file is available under two different licenses:
+* - Pimcore Open Core License (POCL)
+* - Pimcore Commercial License (PCL)
+* Full copyright and license information is available in
+* LICENSE.md which is distributed with this source code.
+*
+*  @copyright  Copyright (c) Pimcore GmbH (http://www.pimcore.org)
+*  @license    https://github.com/pimcore/studio-ui-bundle/blob/1.x/LICENSE.md POCL and PCL
+*/
+
+import { createStyles } from 'antd-style'
+
+export const useStyle = createStyles(({ token, css }) => {
+  return {
+    'document-container': css`
+      width: 100%;
+      height: 100%;
+      .loading-div {
+        position: absolute;
+        top: calc(50% - 11px);
+        left: calc(50% - 8px);
+      }
+
+      .display-none {
+        display: none;
+      }
+    `
+  }
+}, { hashPriority: 'low' })

assets/js/src/core/components/pimcore-document/pimcore-document.tsx

@@ -0,0 +1,43 @@
+/**
+* Pimcore
+*
+* This source file is available under two different licenses:
+* - Pimcore Open Core License (POCL)
+* - Pimcore Commercial License (PCL)
+* Full copyright and license information is available in
+* LICENSE.md which is distributed with this source code.
+*
+*  @copyright  Copyright (c) Pimcore GmbH (http://www.pimcore.org)
+*  @license    https://github.com/pimcore/studio-ui-bundle/blob/1.x/LICENSE.md POCL and PCL
+*/
+
+import { Spin } from 'antd'
+import React, { useState } from 'react'
+import { useStyle } from '@Pimcore/components/pimcore-document/pimcore-document.styles'
+
+interface PimcoreDocumentProps {
+  src: string
+  className?: string
+}
+
+export const PimcoreDocument = ({ src, className }: PimcoreDocumentProps): React.JSX.Element => {
+  const { styles } = useStyle()
+  const [isLoading, setIsLoading] = useState(true)
+
+  const classNameLoading = isLoading ? 'loading-div' : 'display-none'
+  const classNameFrame = isLoading ? 'display-none' : ''
+
+  return (
+    <div className={ [styles['document-container'], className].join(' ') }>
+      <iframe
+        className={ classNameFrame }
+        onLoad={ () => { setIsLoading(false) } }
+        src={ src }
+        title={ src }
+      />
+      <div className={ classNameLoading }>
+        <Spin size="small" />
+      </div>
+    </div>
+  )
+}

assets/js/src/core/components/pimcore-image/pimcore-image.tsx

@@ -14,7 +14,7 @@
 import { Image, type ImageProps, Spin } from 'antd'
 import React, { useContext } from 'react'
 import { useStyle } from '@Pimcore/components/pimcore-image/pimcore-image.styles'
-import { ZoomContext } from '@Pimcore/modules/asset/editor/image/tab-manager/tabs/preview/preview-container'
+import { ZoomContext } from '@Pimcore/modules/asset/editor/types/image/tab-manager/tabs/preview/preview-container'
 
 interface PimcoreImageProps extends ImageProps {
 }

assets/js/src/core/components/pimcore-video/pimcore-video.stories.tsx

@@ -0,0 +1,34 @@
+/**
+* Pimcore
+*
+* This source file is available under two different licenses:
+* - Pimcore Open Core License (POCL)
+* - Pimcore Commercial License (PCL)
+* Full copyright and license information is available in
+* LICENSE.md which is distributed with this source code.
+*
+*  @copyright  Copyright (c) Pimcore GmbH (http://www.pimcore.org)
+*  @license    https://github.com/pimcore/studio-ui-bundle/blob/1.x/LICENSE.md POCL and PCL
+*/
+
+import { type Meta } from '@storybook/react'
+import { PimcoreVideo as PimcoreVideoComponent } from './pimcore-video'
+
+const config: Meta = {
+  title: 'Pimcore studio/UI/PimcoreVideo',
+  component: PimcoreVideoComponent,
+  parameters: {
+    layout: 'centered'
+  },
+  tags: ['autodocs']
+}
+
+export default config
+
+export const _default = {
+  args: {
+    sources: [{ src: 'http://localhost/Sample Content/Videos/Volkswagen-Van.mp4' }],
+    width: 840,
+    className: ''
+  }
+}

assets/js/src/core/components/pimcore-video/pimcore-video.tsx

@@ -0,0 +1,75 @@
+/**
+* Pimcore
+*
+* This source file is available under two different licenses:
+* - Pimcore Open Core License (POCL)
+* - Pimcore Commercial License (PCL)
+* Full copyright and license information is available in
+* LICENSE.md which is distributed with this source code.
+*
+*  @copyright  Copyright (c) Pimcore GmbH (http://www.pimcore.org)
+*  @license    https://github.com/pimcore/studio-ui-bundle/blob/1.x/LICENSE.md POCL and PCL
+*/
+
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+
+interface VideoSourceType {
+  src: string
+  type?: string
+}
+
+interface TrackType {
+  kind: string
+  label: string
+  src: string
+  srcLang: string
+}
+
+interface PimcoreVideoProps {
+  sources: VideoSourceType[]
+  tracks?: TrackType[]
+  width?: number
+  height?: number
+  className?: string
+}
+
+export const PimcoreVideo = ({
+  sources,
+  tracks,
+  width,
+  height,
+  className
+}: PimcoreVideoProps): React.JSX.Element => {
+  const { t } = useTranslation()
+
+  return (
+    // eslint-disable-next-line jsx-a11y/media-has-caption
+    <video
+      className={ className }
+      controls
+      height={ height }
+      width={ width }
+    >
+      {sources.map((source, index) => (
+        <source
+          key={ index }
+          src={ source.src }
+          type={ source.type }
+        />
+      ))}
+
+      {tracks?.map((track, index) => (
+        <track
+          key={ index }
+          kind={ track.kind }
+          label={ track.label }
+          src={ track.src }
+          srcLang={ track.srcLang }
+        />
+      ))}
+
+      { t('asset.preview.no-video-support') }
+    </video>
+  )
+}

assets/js/src/core/components/sidebar/sidebar.stories.tsx

@@ -13,7 +13,7 @@
 
 import { type Meta } from '@storybook/react'
 import { Sidebar } from '@Pimcore/components/sidebar/sidebar'
-import { AssetEditorSidebarDetailsTab } from '@Pimcore/modules/asset/editor/image/tab-manager/tabs/preview/sidebar/tabs/details/details'
+import { AssetEditorSidebarDetailsTab } from '@Pimcore/modules/asset/editor/types/image/tab-manager/tabs/preview/sidebar/tabs/details/details'
 import { Icon } from '@Pimcore/components/icon/icon'
 import React from 'react'
 

assets/js/src/core/components/text-editor/text-editor.stories.tsx

@@ -0,0 +1,34 @@
+/**
+* Pimcore
+*
+* This source file is available under two different licenses:
+* - Pimcore Open Core License (POCL)
+* - Pimcore Commercial License (PCL)
+* Full copyright and license information is available in
+* LICENSE.md which is distributed with this source code.
+*
+*  @copyright  Copyright (c) Pimcore GmbH (http://www.pimcore.org)
+*  @license    https://github.com/pimcore/studio-ui-bundle/blob/1.x/LICENSE.md POCL and PCL
+*/
+
+import { type Meta } from '@storybook/react'
+import { TextEditor as TextEditorComponent } from './text-editor'
+
+const config: Meta = {
+  title: 'Pimcore studio/UI/TextEditor',
+  component: TextEditorComponent,
+  parameters: {
+    layout: 'fullscreen'
+
+  },
+  tags: ['autodocs']
+}
+
+export default config
+
+export const _default = {
+  args: {
+    defaultText: 'I am a default text',
+    lineNumbers: false
+  }
+}

assets/js/src/core/components/text-editor/text-editor.styles.tsx

@@ -0,0 +1,28 @@
+/**
+* Pimcore
+*
+* This source file is available under two different licenses:
+* - Pimcore Open Core License (POCL)
+* - Pimcore Commercial License (PCL)
+* Full copyright and license information is available in
+* LICENSE.md which is distributed with this source code.
+*
+*  @copyright  Copyright (c) Pimcore GmbH (http://www.pimcore.org)
+*  @license    https://github.com/pimcore/studio-ui-bundle/blob/1.x/LICENSE.md POCL and PCL
+*/
+
+import { createStyles } from 'antd-style'
+
+export const useStyle = createStyles(({ token, css }) => {
+  return {
+    editor: css`
+      height: 100%;
+      width: 100%;
+
+      & .CodeMirror {
+        height: 100%;
+        width: 100%;
+      }
+    `
+  }
+}, { hashPriority: 'low' })