refactor(core): CORE-16 type display modes and own fullscreen lifetimes

packages/artplayer/src/player/autoSizeMix.ts

@@ -0,0 +1,30 @@
+import type { AutoSizeHost } from '../display/sizing-types'
+import { containSize, positiveSize } from '../display/sizing'
+import { isClosing } from '../lifecycle/instance'
+import { def, getRect } from '../utils'
+
+export default function autoSizeMix(art: AutoSizeHost): void {
+  const { $container, $player, $video } = art.template
+  def(art, 'autoSize', {
+    value() {
+      if (isClosing(art))
+        return
+      const media = { width: $video.videoWidth, height: $video.videoHeight }
+      if (!positiveSize(media))
+        return
+      const container = getRect($container)
+      const size = containSize(container, media.width / media.height)
+      if (!size || isClosing(art))
+        return
+      if (size.axis === 'width') {
+        $player.style.width = `${(size.width / container.width) * 100}%`
+        $player.style.height = '100%'
+      }
+      else {
+        $player.style.width = '100%'
+        $player.style.height = `${(size.height / container.height) * 100}%`
+      }
+      art.emit('autoSize', { width: art.width, height: art.height })
+    },
+  })
+}