Merge pull request #11 from heyjul3s/feat/media-update

split mediaDevices to mediaInput and mediaDisplay

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;
   });
 });

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
 };

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'
+};

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'
+};

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;