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

packages/artplayer/src/setting/playbackRate.ts

@@ -0,0 +1,43 @@
+import type { SettingHost, SettingItem } from './types'
+import { subscribeSetting } from './resources'
+
+export default function playbackRate(art: SettingHost): SettingItem {
+  const {
+    i18n,
+    icons,
+    constructor: { SETTING_ITEM_WIDTH, PLAYBACK_RATE },
+  } = art
+
+  function getI18n(value: number) {
+    return value === 1.0 ? i18n.get('Normal') : value.toFixed(1)
+  }
+
+  function update() {
+    const target = art.setting.find(`playback-rate-${art.playbackRate}`)
+    art.setting.check(target)
+  }
+
+  return {
+    width: SETTING_ITEM_WIDTH,
+    name: 'playback-rate',
+    html: i18n.get('Play Speed'),
+    tooltip: getI18n(art.playbackRate),
+    icon: icons.playbackRate,
+    selector: PLAYBACK_RATE.map((item) => {
+      return {
+        value: item,
+        name: `playback-rate-${item}`,
+        default: item === art.playbackRate,
+        html: getI18n(item),
+      }
+    }),
+    onSelect(item) {
+      art.playbackRate = item.value as number
+      return item.html
+    },
+    mounted: (_element, item) => {
+      update()
+      subscribeSetting(art, item, 'video:ratechange', () => update())
+    },
+  }
+}