From f7123dd016eb5b73dfc4b877145b95b615384772 Mon Sep 17 00:00:00 2001 From: heyjul3s Date: Tue, 10 Nov 2020 13:31:36 +1100 Subject: [PATCH] split mediaDevices to mediaInput and mediaDisplay --- packages/media/__tests__/mediaDevices.test.ts | 4 +- packages/media/src/constants.ts | 8 ++- packages/media/src/mediaDevices.ts | 65 ------------------- packages/media/src/mediaDisplay.ts | 33 ++++++++++ packages/media/src/mediaInput.ts | 47 ++++++++++++++ packages/media/src/typings.ts | 10 +-- 6 files changed, 93 insertions(+), 74 deletions(-) delete mode 100644 packages/media/src/mediaDevices.ts create mode 100644 packages/media/src/mediaDisplay.ts create mode 100644 packages/media/src/mediaInput.ts diff --git a/packages/media/__tests__/mediaDevices.test.ts b/packages/media/__tests__/mediaDevices.test.ts index 2d7c266..e377411 100644 --- a/packages/media/__tests__/mediaDevices.test.ts +++ b/packages/media/__tests__/mediaDevices.test.ts @@ -1,7 +1,7 @@ -import { mediaDeviceQueries } from '../src/mediaDevices'; +import { mediaInputQueries } from '../src/mediaInput'; describe('mediaDevices', () => { it('should be defined', () => { - expect(mediaDeviceQueries).toBeDefined; + expect(mediaInputQueries).toBeDefined; }); }); diff --git a/packages/media/src/constants.ts b/packages/media/src/constants.ts index f0efc92..f5a6137 100644 --- a/packages/media/src/constants.ts +++ b/packages/media/src/constants.ts @@ -1,6 +1,7 @@ -import { mediaDeviceQueries } from './mediaDevices'; +import { mediaInputQueries } from './mediaInput'; import { mediaTypeQueries } from './mediaTypes'; import { mediaAccessibilityQueries } from './mediaAccessibilty'; +import { mediaDisplayQueries } from './mediaDisplay'; export const { all, @@ -29,7 +30,8 @@ export const { reducedMotion, reducedMotionAny } = { - ...mediaDeviceQueries, + ...mediaInputQueries, ...mediaTypeQueries, - ...mediaAccessibilityQueries + ...mediaAccessibilityQueries, + ...mediaDisplayQueries }; diff --git a/packages/media/src/mediaDevices.ts b/packages/media/src/mediaDevices.ts deleted file mode 100644 index ad5d052..0000000 --- a/packages/media/src/mediaDevices.ts +++ /dev/null @@ -1,65 +0,0 @@ -export enum MediaDeviceQueryKeys { - 'landscape' = 'landscape', - 'portrait' = 'portrait', - 'anyHover' = 'anyHover', - 'anyHoverNone' = 'anyHoverNone', - 'hover' = 'hover', - 'hoverNone' = 'hoverNone', - 'anyPointer' = 'anyPointer', - 'anyPointerNone' = 'anyPointerNone', - 'pointer' = 'pointer', - 'pointerNone' = 'pointerNone', - 'displayFullScreen' = 'displayFullScreen', - 'displayStandalone' = 'displayStandalone', - 'displayMinUI' = 'displayMinUI', - 'displayBrowser' = 'displayBrowser' -} - -export type MediaDeviceQueries = { - [MediaDeviceQueryKeys.anyHover]: AnyHover; - [MediaDeviceQueryKeys.anyHoverNone]: AnyHoverNone; - [MediaDeviceQueryKeys.anyPointer]: AnyPointer; - [MediaDeviceQueryKeys.anyPointerNone]: AnyPointerNone; - [MediaDeviceQueryKeys.displayBrowser]: DisplayModeBrowser; - [MediaDeviceQueryKeys.displayFullScreen]: DisplayModeFullScreen; - [MediaDeviceQueryKeys.displayMinUI]: DisplayModeMinUI; - [MediaDeviceQueryKeys.displayStandalone]: DisplayModeStandalone; - [MediaDeviceQueryKeys.hover]: Hover; - [MediaDeviceQueryKeys.hoverNone]: HoverNone; - [MediaDeviceQueryKeys.landscape]: OrientationLandscape; - [MediaDeviceQueryKeys.pointer]: Pointer; - [MediaDeviceQueryKeys.pointerNone]: PointerNone; - [MediaDeviceQueryKeys.portrait]: OrientationPortrait; -}; - -export type AnyHover = 'any-hover: hover'; -export type AnyHoverNone = 'any-hover: none'; -export type AnyPointer = 'any-pointer: pointer'; -export type AnyPointerNone = 'any-pointer: none'; -export type DisplayModeBrowser = 'display-mode: browser'; -export type DisplayModeFullScreen = 'display-mode: fullscreen'; -export type DisplayModeMinUI = 'display-mode: minimal-ui'; -export type DisplayModeStandalone = 'display-mode: standalone'; -export type Hover = 'hover: hover'; -export type HoverNone = 'hover: none'; -export type OrientationLandscape = 'orientation: landscape'; -export type OrientationPortrait = 'orientation: portrait'; -export type Pointer = 'pointer: pointer'; -export type PointerNone = 'pointer: none'; - -export const mediaDeviceQueries: MediaDeviceQueries = { - [MediaDeviceQueryKeys.anyHover]: 'any-hover: hover', - [MediaDeviceQueryKeys.anyHoverNone]: 'any-hover: none', - [MediaDeviceQueryKeys.hover]: 'hover: hover', - [MediaDeviceQueryKeys.hoverNone]: 'hover: none', - [MediaDeviceQueryKeys.anyPointer]: 'any-pointer: pointer', - [MediaDeviceQueryKeys.anyPointerNone]: 'any-pointer: none', - [MediaDeviceQueryKeys.pointer]: 'pointer: pointer', - [MediaDeviceQueryKeys.pointerNone]: 'pointer: none', - [MediaDeviceQueryKeys.landscape]: 'orientation: landscape', - [MediaDeviceQueryKeys.portrait]: 'orientation: portrait', - [MediaDeviceQueryKeys.displayFullScreen]: 'display-mode: fullscreen', - [MediaDeviceQueryKeys.displayStandalone]: 'display-mode: standalone', - [MediaDeviceQueryKeys.displayMinUI]: 'display-mode: minimal-ui', - [MediaDeviceQueryKeys.displayBrowser]: 'display-mode: browser' -}; diff --git a/packages/media/src/mediaDisplay.ts b/packages/media/src/mediaDisplay.ts new file mode 100644 index 0000000..4e12c92 --- /dev/null +++ b/packages/media/src/mediaDisplay.ts @@ -0,0 +1,33 @@ +export enum MediaDeviceQueryKeys { + 'landscape' = 'landscape', + 'portrait' = 'portrait', + 'fullScreen' = 'displayFullScreen', + 'standalone' = 'displayStandalone', + 'minUI' = 'displayMinUI', + 'browser' = 'displayBrowser' +} + +export type MediaDisplayQueries = { + [MediaDeviceQueryKeys.browser]: DisplayModeBrowser; + [MediaDeviceQueryKeys.fullScreen]: DisplayModeFullScreen; + [MediaDeviceQueryKeys.minUI]: DisplayModeMinUI; + [MediaDeviceQueryKeys.standalone]: DisplayModeStandalone; + [MediaDeviceQueryKeys.landscape]: OrientationLandscape; + [MediaDeviceQueryKeys.portrait]: OrientationPortrait; +}; + +export type DisplayModeBrowser = 'display-mode: browser'; +export type DisplayModeFullScreen = 'display-mode: fullscreen'; +export type DisplayModeMinUI = 'display-mode: minimal-ui'; +export type DisplayModeStandalone = 'display-mode: standalone'; +export type OrientationLandscape = 'orientation: landscape'; +export type OrientationPortrait = 'orientation: portrait'; + +export const mediaDisplayQueries: MediaDisplayQueries = { + [MediaDeviceQueryKeys.landscape]: 'orientation: landscape', + [MediaDeviceQueryKeys.portrait]: 'orientation: portrait', + [MediaDeviceQueryKeys.fullScreen]: 'display-mode: fullscreen', + [MediaDeviceQueryKeys.standalone]: 'display-mode: standalone', + [MediaDeviceQueryKeys.minUI]: 'display-mode: minimal-ui', + [MediaDeviceQueryKeys.browser]: 'display-mode: browser' +}; diff --git a/packages/media/src/mediaInput.ts b/packages/media/src/mediaInput.ts new file mode 100644 index 0000000..c06754e --- /dev/null +++ b/packages/media/src/mediaInput.ts @@ -0,0 +1,47 @@ +export enum MediaInputQueryKeys { + 'anyHover' = 'anyHover', + 'anyHoverNone' = 'anyHoverNone', + 'hover' = 'hover', + 'hoverNone' = 'hoverNone', + 'anyPointer' = 'anyPointer', + 'anyPointerNone' = 'anyPointerNone', + 'pointer' = 'pointer', + 'pointerNone' = 'pointerNone' +} + +export type MediaInputQueries = { + [MediaInputQueryKeys.anyHover]: AnyHover; + [MediaInputQueryKeys.anyHoverNone]: AnyHoverNone; + [MediaInputQueryKeys.anyPointer]: AnyPointer; + [MediaInputQueryKeys.anyPointerNone]: AnyPointerNone; + [MediaInputQueryKeys.hover]: Hover; + [MediaInputQueryKeys.hoverNone]: HoverNone; + [MediaInputQueryKeys.pointer]: Pointer; + [MediaInputQueryKeys.pointerNone]: PointerNone; +}; + +export type AnyHover = 'any-hover: hover'; +export type AnyHoverNone = 'any-hover: none'; +export type AnyPointer = 'any-pointer: pointer'; +export type AnyPointerNone = 'any-pointer: none'; +export type DisplayModeBrowser = 'display-mode: browser'; +export type DisplayModeFullScreen = 'display-mode: fullscreen'; +export type DisplayModeMinUI = 'display-mode: minimal-ui'; +export type DisplayModeStandalone = 'display-mode: standalone'; +export type Hover = 'hover: hover'; +export type HoverNone = 'hover: none'; +export type OrientationLandscape = 'orientation: landscape'; +export type OrientationPortrait = 'orientation: portrait'; +export type Pointer = 'pointer: pointer'; +export type PointerNone = 'pointer: none'; + +export const mediaInputQueries: MediaInputQueries = { + [MediaInputQueryKeys.anyHover]: 'any-hover: hover', + [MediaInputQueryKeys.anyHoverNone]: 'any-hover: none', + [MediaInputQueryKeys.hover]: 'hover: hover', + [MediaInputQueryKeys.hoverNone]: 'hover: none', + [MediaInputQueryKeys.anyPointer]: 'any-pointer: pointer', + [MediaInputQueryKeys.anyPointerNone]: 'any-pointer: none', + [MediaInputQueryKeys.pointer]: 'pointer: pointer', + [MediaInputQueryKeys.pointerNone]: 'pointer: none' +}; diff --git a/packages/media/src/typings.ts b/packages/media/src/typings.ts index c58f8fd..e323e84 100644 --- a/packages/media/src/typings.ts +++ b/packages/media/src/typings.ts @@ -1,9 +1,11 @@ import { MediaBoundaries } from './mediaBoundaries'; -import { MediaDeviceQueries } from './mediaDevices'; -import { MediaTypes } from './MediaTypes'; +import { MediaInputQueries } from './mediaInput'; +import { MediaTypes } from './mediaTypes'; import { MediaAccessibilityQueries } from './mediaAccessibilty'; +import { MediaDisplayQueries } from './mediaDisplay'; export type Media = MediaBoundaries & - MediaDeviceQueries & + MediaInputQueries & MediaTypes & - MediaAccessibilityQueries; + MediaAccessibilityQueries & + MediaDisplayQueries;