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

packages/artplayer/src/plugins/autoOrientation.js

@@ -1,101 +0,0 @@
-import { addClass, getSafeAreaInsets, hasClass, removeClass, setStyle } from '../utils'
-
-export default function autoOrientation(art) {
-  const {
-    notice,
-    constructor,
-    template: { $player, $video },
-  } = art
-
-  const WEB_CLASS = 'art-auto-orientation'
-  const FS_CLASS = 'art-auto-orientation-fullscreen'
-  let fsLocked = false
-
-  function applyWebRotate() {
-    const insets = getSafeAreaInsets()
-    const viewWidth = document.documentElement.clientWidth
-    const viewHeight = document.documentElement.clientHeight
-    const safeWidth = viewHeight - insets.top - insets.bottom
-    const safeHeight = viewWidth - insets.left - insets.right
-    setStyle($player, 'width', `${safeWidth}px`)
-    setStyle($player, 'height', `${safeHeight}px`)
-    setStyle($player, 'transform-origin', '0 0')
-    setStyle($player, 'transform', `rotate(90deg) translate(${insets.top}px, -${viewWidth - insets.right}px)`)
-    addClass($player, WEB_CLASS)
-    art.isRotate = true
-    art.emit('resize')
-  }
-
-  function clearWebRotate() {
-    setStyle($player, 'width', '')
-    setStyle($player, 'height', '')
-    setStyle($player, 'transform-origin', '')
-    setStyle($player, 'transform', '')
-    removeClass($player, WEB_CLASS)
-    art.isRotate = false
-    art.emit('resize')
-  }
-
-  function needRotate() {
-    const { videoWidth, videoHeight } = $video
-    const vw = document.documentElement.clientWidth
-    const vh = document.documentElement.clientHeight
-    return (videoWidth > videoHeight && vw < vh) || (videoWidth < videoHeight && vw > vh)
-  }
-
-  art.on('fullscreenWeb', (state) => {
-    if (state) {
-      if (needRotate()) {
-        const delay = Number(constructor.AUTO_ORIENTATION_TIME ?? 0)
-        setTimeout(() => {
-          if (art.fullscreenWeb && !hasClass($player, WEB_CLASS)) {
-            applyWebRotate()
-          }
-        }, delay)
-      }
-    }
-    else {
-      if (hasClass($player, WEB_CLASS))
-        clearWebRotate()
-    }
-  })
-
-  art.on('fullscreen', async (state) => {
-    const canLock = !!screen?.orientation?.lock
-
-    if (state) {
-      if (canLock && needRotate()) {
-        try {
-          const last = screen.orientation.type
-          const opposite = last.startsWith('portrait') ? 'landscape' : 'portrait'
-          await screen.orientation.lock(opposite)
-          fsLocked = true
-          addClass($player, FS_CLASS)
-        }
-        catch (err) {
-          fsLocked = false
-          notice.show = err
-        }
-      }
-    }
-    else {
-      if (hasClass($player, FS_CLASS)) {
-        removeClass($player, FS_CLASS)
-      }
-      if (canLock && fsLocked) {
-        try {
-          screen.orientation.unlock()
-        }
-        catch { }
-        fsLocked = false
-      }
-    }
-  })
-
-  return {
-    name: 'autoOrientation',
-    get state() {
-      return hasClass($player, WEB_CLASS)
-    },
-  }
-}

packages/artplayer/src/plugins/autoOrientation.ts

@@ -0,0 +1,30 @@
+import type { OrientationHost } from '../display/orientation-types'
+import { nativeOrientation } from '../display/orientation-native'
+import { webOrientation } from '../display/orientation-web'
+import { positiveSize } from '../display/sizing'
+import { getScope } from '../lifecycle/instance'
+
+export default function autoOrientation(art: OrientationHost): { name: string, readonly state: boolean } {
+  const { $player, $video } = art.template
+  const needRotate = () => {
+    const media = { width: $video.videoWidth, height: $video.videoHeight }
+    const viewport = $player.ownerDocument.documentElement
+    const view = { width: viewport.clientWidth, height: viewport.clientHeight }
+    return positiveSize(media) && positiveSize(view)
+      && ((media.width > media.height && view.width < view.height) || (media.width < media.height && view.width > view.height))
+  }
+  const web = webOrientation(art, needRotate)
+  const native = nativeOrientation(art, needRotate)
+  art.on('fullscreenWeb', web)
+  art.on('fullscreen', native)
+  getScope(art).add(() => {
+    art.off('fullscreenWeb', web)
+    art.off('fullscreen', native)
+  })
+  return {
+    name: 'autoOrientation',
+    get state() {
+      return $player.classList.contains('art-auto-orientation')
+    },
+  }
+}

packages/artplayer/src/plugins/builtins.ts

@@ -1,4 +1,4 @@
-import type { BuiltinRegistry, PluginHost } from './types'
+import type { BuiltinRegistry, PluginFactory, PluginHost } from './types'
 import { isClosing } from '../lifecycle/instance'
 import { isMobile } from '../utils/compatibility'
 import autoOrientation from './autoOrientation'
@@ -15,8 +15,10 @@ export default function installBuiltins<Host extends PluginHost<Host>>(registry:
     registry.add(lock)
   if (!isClosing(registry.art) && option.autoPlayback && !option.isLive)
     registry.add(autoPlayback)
-  if (!isClosing(registry.art) && option.autoOrientation && isMobile)
-    registry.add(autoOrientation)
+  if (!isClosing(registry.art) && option.autoOrientation && isMobile) {
+    // The JS constructor supplies the complete host before builtin installation.
+    registry.add(autoOrientation as unknown as PluginFactory<Host>)
+  }
   if (!isClosing(registry.art) && option.fastForward && isMobile && !option.isLive)
     registry.add(fastForward)
 }