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

packages/artplayer/src/setting/flip.ts

@@ -0,0 +1,44 @@
+import type { SettingHost, SettingItem } from './types'
+import { capitalize } from '../utils'
+import { subscribeSetting } from './resources'
+
+export default function flip(art: SettingHost): SettingItem {
+  const {
+    i18n,
+    icons,
+    constructor: { SETTING_ITEM_WIDTH, FLIP },
+  } = art
+
+  function getI18n(value: string) {
+    return i18n.get(capitalize(value))
+  }
+
+  function update() {
+    const target = art.setting.find(`flip-${art.flip}`)
+    art.setting.check(target)
+  }
+
+  return {
+    width: SETTING_ITEM_WIDTH,
+    name: 'flip',
+    html: i18n.get('Video Flip'),
+    tooltip: getI18n(art.flip),
+    icon: icons.flip,
+    selector: FLIP.map((item) => {
+      return {
+        value: item,
+        name: `flip-${item}`,
+        default: item === art.flip,
+        html: getI18n(item),
+      }
+    }),
+    onSelect(item) {
+      art.flip = item.value as string
+      return item.html
+    },
+    mounted: (_element, item) => {
+      update()
+      subscribeSetting(art, item, 'flip', () => update())
+    },
+  }
+}