编辑器初学者的坚持
在编辑器入门中有三种持久性类型:
🌐 There are 3 types of persistance in the Editor Starter:
- 保存编辑器状态
- 在 IndexedDB 中缓存 资源(视频、图片、音频等)
- 保存循环设置
保存编辑器状态
🌐 Saving the editor state
函数 saveState() 和 loadState() 用于保存和加载编辑器状态。
🌐 The functions saveState() and loadState() are used to save and load the editor state.
Location
默认情况下,状态会保存到浏览器的本地存储中。
🌐 By default, the state is saved to the browser's local storage.
如果你想远程保存状态,你可以:
🌐 If you want to save the state remotely, you can:
- 更改这些函数的实现
- 将这些函数转换为 Promise
await它们的使用。
触发保存
🌐 Triggering a save
有两种方式可以保存状态:
🌐 There are 2 ways to save the state:
- 通过点击顶部工具栏中的“保存”按钮
- 通过使用键盘快捷键 Cmd/Ctrl + S (来源)
如果你想自动保存状态,请查看我们关于实现自动保存功能的建议。
🌐 See our suggestion for implementing an auto-save feature if you want to save the state automatically.
范围
🌐 Scope
默认情况下,只有可撤销状态会被保留。
🌐 By default only the undoable state is persisted.
编辑器入门假设可撤销状态部分是应该持久化的状态。
🌐 The Editor Starter has a simplified assumption that the undoable state portion of the state that should be persisted.
如果你也想保留不可撤销状态的部分,你可以在 saveState() 和 loadState() 函数中接受更多数据。
🌐 If you also want to persist parts of the non-undoable state, you can accept more data in the saveState() and loadState() functions.
禁用
🌐 Disabling
保存功能位于功能开关 FEATURE_SAVE_BUTTON 和 FEATURE_SAVE_SHORTCUT 之后。
🌐 The save functionality is behind the feature flags FEATURE_SAVE_BUTTON and FEATURE_SAVE_SHORTCUT.
禁用该标志或删除该标志以及其背后的所有代码以禁用保存功能。
🌐 Disable the flag or delete the flag and all the code that is behind it to disable the save functionality.
持久性密钥
🌐 Persistance key
在使用 saveState() 和 loadState() 函数的默认实现时,状态会保存在浏览器的本地存储中,并使用版本化的键,例如 const key = 'remotion-editor-starter-state-v1'。
🌐 When using the default implementation of the saveState() and loadState() functions, the state is saved to the browser's local storage under a versioned key, e.g. const key = 'remotion-editor-starter-state-v1'.
确保只将与你在运行时操作的架构兼容的状态保存到此键。如果你更改了状态的结构,请考虑增加该键的版本,或在加载时将状态迁移到新的架构。
🌐 Make sure to only save states to this key that are compatible with the schema you operate on at runtime.
If you change the structure of your state, consider incrementing the version of the key, or migrating the state to the new schema at load.
缓存资源
🌐 Caching assets
因为远程加载资源可能很慢,编辑器启动器会将它们缓存在 IndexedDB 中,并在显示时优先使用本地缓存的资源而不是远程资源。
🌐 Because loading the assets remotely can be slow, the Editor Starter caches them in IndexedDB and prefers them over remote assets when displaying.
indexeddb.ts 文件包含 IndexedDB 的实现。
🌐 The indexeddb.ts file contains the implementation of the IndexedDB.
当资源不再需要时,需要手动清理:资源清理
🌐 Assets need to be manually cleaned up when they are no longer needed: Asset cleanup
<DownloadRemoteAssets> 组件会下载任何远程资源并将其缓存在本地。
🌐 The <DownloadRemoteAssets> component downloads any assets that are remote and caches them locally.
<UseLocalCachedAssets> 组件从 IndexedDB 加载缓存的资源并将其转换为 blob URL。
此外,initialize() 函数将在初始编辑器状态加载之前加载任何已缓存的资源,以尽可能避免对远程服务器的请求。
🌐 The <UseLocalCachedAssets> component loads cached assets from IndexedDB and turns them into blob URLs.
In addition, the initialize() function will load any cached assets from IndexedDB before the initial editor state loaded, to prevent any requests to the remote server if possible.
循环设置
🌐 Loop setting
在 src/editor/state/loop-persistance.ts 中,有用于保存循环设置的逻辑。
🌐 In src/editor/state/loop-persistance.ts, there is logic for persisting the loop setting.
另请参阅
🌐 See also