From e8c057cefb7796301ce196932c259e32a607b072 Mon Sep 17 00:00:00 2001
From: "Michael J. Roberts"
 <84131395+michael-observerly@users.noreply.github.com>
Date: Tue, 3 May 2022 17:35:05 +0100
Subject: [PATCH] feat(useScreenOrientation): new function (#1526)

Co-authored-by: okxiaoliang4 <353742991@qq.com>
---
 packages/core/index.ts                        |  1 +
 packages/core/useScreenOrientation/demo.vue   | 19 +++++++
 packages/core/useScreenOrientation/index.md   | 47 +++++++++++++++++
 .../core/useScreenOrientation/index.test.ts   |  7 +++
 packages/core/useScreenOrientation/index.ts   | 52 +++++++++++++++++++
 5 files changed, 126 insertions(+)
 create mode 100644 packages/core/useScreenOrientation/demo.vue
 create mode 100644 packages/core/useScreenOrientation/index.md
 create mode 100644 packages/core/useScreenOrientation/index.test.ts
 create mode 100644 packages/core/useScreenOrientation/index.ts

diff --git a/packages/core/index.ts b/packages/core/index.ts
index 4d191da04dd..fb34dc83890 100644
--- a/packages/core/index.ts
+++ b/packages/core/index.ts
@@ -82,6 +82,7 @@ export * from './usePreferredLanguages'
 export * from './useRafFn'
 export * from './useRefHistory'
 export * from './useResizeObserver'
+export * from './useScreenOrientation'
 export * from './useScreenSafeArea'
 export * from './useScriptTag'
 export * from './useScroll'
diff --git a/packages/core/useScreenOrientation/demo.vue b/packages/core/useScreenOrientation/demo.vue
new file mode 100644
index 00000000000..b5e8d0bac07
--- /dev/null
+++ b/packages/core/useScreenOrientation/demo.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { useScreenOrientation } from '.'
+
+const { isSupported, orientation, angle } = useScreenOrientation()
+</script>
+
+<template>
+  <note class="mb-2">
+    For best results, please use a mobile or tablet device (or use your browser's native inspector to simulate an
+    orienatation change)
+  </note>
+  <div>
+    isSupported: <boolean-display :value="isSupported">
+      {{ isSupported }}
+    </boolean-display>
+  </div>
+  <div>Orientation Type: <b>{{ orientation }}</b></div>
+  <div>Orientation Angle: <b>{{ angle }}</b></div>
+</template>
diff --git a/packages/core/useScreenOrientation/index.md b/packages/core/useScreenOrientation/index.md
new file mode 100644
index 00000000000..8339489a87e
--- /dev/null
+++ b/packages/core/useScreenOrientation/index.md
@@ -0,0 +1,47 @@
+---
+category: Browser
+---
+
+# useScreenOrientation
+
+Reactive [Screen Orientation API](https://developer.mozilla.org/en-US/docs/Web/API/Screen_Orientation_API). It provides web developers with information about the user's current screen orientation.
+
+## Usage
+
+```ts
+import { useScreenOrientation } from '.'
+
+const {
+  isSupported,
+  orientation,
+  angle,
+  lockOrientation,
+  unlockOrientation,
+} = useScreenOrientation()
+```
+
+To lock the orientation, you can pass an [OrientationLockType](https://developer.mozilla.org/en-US/docs/Web/API/ScreenOrientation/type) to the lockOrientation function:
+
+```ts
+import { useScreenOrientation } from '.'
+
+const {
+  isSupported,
+  orientation,
+  angle,
+  lockOrientation,
+  unlockOrientation,
+} = useScreenOrientation()
+
+lockOrientation('primary-portrait')
+```
+
+and then unlock again, with the following:
+
+```ts
+unlockOrientation()
+```
+
+Accepted orientation types are one of `"landscape-primary"`, `"landscape-secondary"`, `"portrait-primary"`, `"portrait-secondary"`, `"any"`, `"landscape"`, `"natural"` and `"portrait"`.
+
+[Screen Orientation API MDN](https://developer.mozilla.org/en-US/docs/Web/API/Screen_Orientation_API)
diff --git a/packages/core/useScreenOrientation/index.test.ts b/packages/core/useScreenOrientation/index.test.ts
new file mode 100644
index 00000000000..320a462c491
--- /dev/null
+++ b/packages/core/useScreenOrientation/index.test.ts
@@ -0,0 +1,7 @@
+import { useScreenOrientation } from '.'
+
+describe('useScreenOrientation', () => {
+  it('should be defined', () => {
+    expect(useScreenOrientation).toBeDefined()
+  })
+})
diff --git a/packages/core/useScreenOrientation/index.ts b/packages/core/useScreenOrientation/index.ts
new file mode 100644
index 00000000000..ecb4d583745
--- /dev/null
+++ b/packages/core/useScreenOrientation/index.ts
@@ -0,0 +1,52 @@
+import { ref } from 'vue-demi'
+import { useEventListener } from '../useEventListener'
+import type { ConfigurableWindow } from '../_configurable'
+import { defaultWindow } from '../_configurable'
+
+/**
+ *
+ * Reactive screen orientation
+ *
+ * @see https://vueuse.org/useScreenOrientation
+ */
+export const useScreenOrientation = (options: ConfigurableWindow = {}) => {
+  const {
+    window = defaultWindow,
+  } = options
+
+  const isSupported = !!(window && 'screen' in window && 'orientation' in window.screen)
+
+  const screenOrientation = isSupported ? window.screen.orientation : {} as ScreenOrientation
+
+  const orientation = ref<OrientationType | undefined>(screenOrientation.type)
+  const angle = ref(screenOrientation.angle || 0)
+
+  if (isSupported) {
+    useEventListener(window, 'orientationchange', () => {
+      orientation.value = screenOrientation.type
+      angle.value = screenOrientation.angle
+    })
+  }
+
+  const lockOrientation = (type: OrientationLockType) => {
+    if (!isSupported)
+      return Promise.reject(new Error('Not supported'))
+
+    return screenOrientation.lock(type)
+  }
+
+  const unlockOrientation = () => {
+    if (isSupported)
+      screenOrientation.unlock()
+  }
+
+  return {
+    isSupported,
+    orientation,
+    angle,
+    lockOrientation,
+    unlockOrientation,
+  }
+}
+
+export type UseScreenOrientationReturn = ReturnType<typeof useScreenOrientation>