README

此包包含Neos CMS（7.3 - 8.3）中管理媒体的新接口。

在初始开发期间，该包将位于Flowpack命名空间中，并将最终替换neos/media-browser。

如果您想使用Neos，请参阅Neos文档。

截图

资产管理

资产选择

资产详情

安装

运行以下命令进行安装

composer require flowpack/media-ui

之后，您应执行doctrine迁移，因为该包为数据库添加了新列

./flow doctrine:migrate

在某些罕见情况下，需要刷新缓存以防止PHP错误，因为该包扩展了一些核心类

./flow flow:cache:flush

然后，您应更新现有资产集合的路径

./flow assetcollections:updatepaths

这仅在安装后需要一次。之后，路径将自动更新。

有哪些变化？

该包目前将添加一个名为Media (new)的第二媒体后端模块，以及一个用于资产和图像编辑器的新媒体选择屏幕。旧媒体模块仍将可用，直到Neos的后续重大版本中该包完全替换它。

禁用旧媒体模块

如果您不需要旧媒体模块，可以在Settings.yaml中禁用它

Neos:
  Neos:
    modules:
      management:
        submodules:
          media:
            # Disable the default media module and use the new media ui
            enabled: false
          mediaui:
            # Moves the new module to top
            position: start

禁用新媒体选择

如果您想在实际项目中使用此包，可能需要禁用新的媒体选择，如果它不符合预期。您可以通过在Settings.yaml中添加以下设置来实现此操作

Neos:
  Neos:
    Ui:
      frontendConfiguration:
        Flowpack.Media.Ui:
          useNewMediaSelection: false

分层资产集合

此包将通过AOP启用分层资产集合结构（直到该功能在Neos核心中）。使用此功能，您可以在另一个集合中添加集合或将其分配给另一个集合，从而创建与计算机文件系统中文件夹类似的结构。

建议启用功能标志limitToSingleAssetCollectionPerAsset（见下文），以获得更好的体验 - 见下文。

该包还提供了\Flowpack\Media\Ui\Security\Authorization\Privilege\ReadHierarchicalAssetCollectionPrivilege，其中包含附加方法isInPath(<string>)，可用于控制对集合的访问。

privilegeTargets:
  'Flowpack\Media\Ui\Security\Authorization\Privilege\ReadHierarchicalAssetCollectionPrivilege':
    'Some.Package:ReadSpecialAssetCollectionAndSubCollections':
      matcher: 'isInPath("/important-collections")'
  'Flowpack\Media\Ui\Security\Authorization\Privilege\ReadAssetPrivilege':
    'Some.Package:ReadSpecialAssets':
      matcher: 'isInCollectionPath("/important-collections")'

可选功能

限制资产只能分配给一个资产集合

通过限制资产只能在一个集合中，您可以强制执行更类似于文件夹的体验

Neos:
  Neos:
    Ui:
      frontendConfiguration:
        Flowpack.Media.Ui:
          # Only allow a single asset collection selection per asset to treat collection like folders
          limitToSingleAssetCollectionPerAsset: true

快速资产使用计算和未使用资产视图

Neos中默认的资产使用速度非常慢，因为它在运行时进行计算。为此，它会检查您的整个项目，以确定资产可能在哪里使用。对于新的媒体UI，通过包Flowpack.Neos.AssetUsage实现了一个新方法。

该包提供了一个服务，将所有资产使用引用存储在数据库表中（可以实现其他存储）。因此，在安装该包及其相关依赖项后，您应更新使用引用索引

./flow assetusage:update

您只需要为应用程序的每个实例执行一次，例如开发、测试或生产。之后，索引将自动保持更新。确保在执行导入或以任何其他异常方式更改内容仓库后手动再次运行命令。这将清理任何过时的使用。

您现在可以通过以下设置启用此功能

Neos:
  Neos:
    Ui:
      frontendConfiguration:
        Flowpack.Media.Ui:
          queryAssetUsage: true

现在，如果资产正在使用中，将禁用“删除”操作，并且过滤器下拉菜单包含一个新项目“未使用”。选择它将切换主视图以显示所有未使用的资产。

自定义使用详情

Neos中的使用计算机制已经通过AssetUsageStrategyInterface支持自定义使用提供者。如果您的策略实现了此接口，媒体UI将分别显示每个策略的使用情况。

通过实现UsageDetailsProviderInterface，您可以提供策略的自定义标签以及每个条目的自定义标题和值。

显示类似资产

此包提供了SimilarAssetStrategyInterface。其他包可以实现此接口，并根据给定的资产提供其他资产的列表。

例如，这可能包括感知上相似的照片或具有类似文件名的资产。

鉴于您已安装具有策略的包，请使用以下设置在ui中启用此功能

Neos:
  Neos:
    Ui:
      frontendConfiguration:
        Flowpack.Media.Ui:
          showSimilarAssets: true

禁用资产重定向复选框

如果您不想或无法使用资产的自动生成重定向，您可以使用以下设置来禁用它

Neos:
  Neos:
    Ui:
      frontendConfiguration:
        Flowpack.Media.Ui:
          createAssetRedirectsOption: false

架构

API / GraphQL

本模块引入了Neos媒体系统的GraphQL API。该API是开放的，可以用于自定义应用程序。访问它需要有效的Neos后端用户，但您可以定义自定义策略和身份验证提供者，以允许不使用用户并使用基于令牌的身份验证。

模式

GraphQL模式可以在以下位置找到：这里。

接口

本模块使用React来实现UI。目前，应用程序的大部分部分都作为基于功能的包在Resources/Private/JavaScript文件夹中实现。在未来版本中，代码将被进一步拆分为更小的包。

状态管理

查询变量

通过GraphQL Mutations在Apollo Client Cache中存储与查询相关的状态变量。其中一些变量然后持久化到浏览器的本地存储中。

解析的查询结果状态

MediaUI提供者目前将其结果存储在其状态中，并通过提供者值将其提供给所有子组件。这可能会被修改为仅设置所有组件都可以访问的共享状态。

组件状态

组件状态应使用React hooks存储。

共享组件状态

共享组件状态当前通过React Recoil原子和选择器实现。请参阅Resources/Private/JavaScript文件夹中各个模块的state文件夹中的示例。

每次多个组件共享一个不适用于GraphQL查询的状态时，都应该使用这些。

资助开发

我们需要您的帮助来开发此包。您可以在官方Neos资助网站上找到支持者徽章。

贡献

要开始开发，请确保您已安装nvm和yarn，并在包文件夹中运行以下命令

yarn

运行不带Neos的独立开发服务器

开发服务器允许在没有Neos实例的情况下运行模块。这也是运行大多数测试和实现新功能的基础。

yarn dev

在您的浏览器中输入localhost:8000，您将有一个运行的媒体UI实例，不包含Neos。

构建模块资产

这将创建模块资产的生成版构建。

yarn build

开发期间重新编译文件

以下命令将在脚本发生变化时重新编译和重新加载媒体模块

yarn watch

仅监视后端模块代码

yarn watch:module

仅监视UI插件

yarn watch:editor

检查代码质量

运行以下命令以验证TypeScript文件

yarn lint

运行端到端测试

首先通过 yarn dev 启动开发服务器，然后运行以下命令以执行所有端到端测试

yarn e2e

测试配置定义在 .testcaferc.json 中。

要使用不同的浏览器，您可以在运行测试时定义它

yarn test firefox

有关更多信息和支持的浏览器，请参阅 Testcafe 文档。

运行phpstan进行代码风格检查

首先，请确保您已安装 phpstan。

如果包安装在一个Neos发行版中

composer run codestyle

如果包是独立的

composer run codestyle:ci

运行PHPUnit进行单元测试