refactor(core): CORE-14 split typed settings and scope tree lifetimes

packages/artplayer/src/setting/aspectRatio.ts

@@ -0,0 +1,43 @@
+import type { SettingHost, SettingItem } from './types'
+import { subscribeSetting } from './resources'
+
+export default function aspectRatio(art: SettingHost): SettingItem {
+  const {
+    i18n,
+    icons,
+    constructor: { SETTING_ITEM_WIDTH, ASPECT_RATIO },
+  } = art
+
+  function getI18n(value: string) {
+    return value === 'default' ? i18n.get('Default') : value
+  }
+
+  function update() {
+    const target = art.setting.find(`aspect-ratio-${art.aspectRatio}`)
+    art.setting.check(target)
+  }
+
+  return {
+    width: SETTING_ITEM_WIDTH,
+    name: 'aspect-ratio',
+    html: i18n.get('Aspect Ratio'),
+    icon: icons.aspectRatio,
+    tooltip: getI18n(art.aspectRatio),
+    selector: ASPECT_RATIO.map((item) => {
+      return {
+        value: item,
+        name: `aspect-ratio-${item}`,
+        default: item === art.aspectRatio,
+        html: getI18n(item),
+      }
+    }),
+    onSelect(item) {
+      art.aspectRatio = item.value as string
+      return item.html
+    },
+    mounted: (_element, item) => {
+      update()
+      subscribeSetting(art, item, 'aspectRatio', () => update())
+    },
+  }
+}