Code: Added new types package for TS

packages/media/package.json

@@ -40,6 +40,7 @@
   "dependencies": {
     "@googleforcreators/react": "*",
     "@googleforcreators/tracking": "*",
+    "@googleforcreators/types": "*",
     "@googleforcreators/units": "*",
     "mime": "^3.0.0",
     "prop-types": "^15.8.1"

packages/media/src/aspectRatiosApproximatelyMatch.ts

@@ -15,9 +15,9 @@
  */
 
 /**
- * Internal dependencies
+ * External dependencies
  */
-import type { Dimensions } from './types';
+import type { Dimensions } from '@googleforcreators/types';
 
 function aspectRatiosApproximatelyMatch(
   obj1: Dimensions,

packages/media/src/calculateSrcSet.ts

@@ -14,11 +14,15 @@
  * limitations under the License.
  */
 
+/**
+ * External dependencies
+ */
+import type { Resource, ResourceSize } from '@googleforcreators/types';
+
 /**
  * Internal dependencies
  */
 import aspectRatiosApproximatelyMatch from './aspectRatiosApproximatelyMatch';
-import type { Resource, ResourceSize } from './types';
 
 /**
  * Encodes a text string as a valid Uniform Resource Identifier (URI)

packages/media/src/createResource.ts

@@ -15,16 +15,21 @@
  */
 
 /**
- * Internal dependencies
+ * External dependencies
  */
-import getTypeFromMime from './getTypeFromMime';
-import normalizeResourceSizes from './normalizeResourceSizes';
-import type {
+import {
   GifResource,
   Resource,
+  ResourceType,
   VideoResource,
-  ResourceInput,
-} from './types';
+} from '@googleforcreators/types';
+
+/**
+ * Internal dependencies
+ */
+import getTypeFromMime from './getTypeFromMime';
+import normalizeResourceSizes from './normalizeResourceSizes';
+import type { ResourceInput } from './types';
 
 /**
  * Creates a resource object.
@@ -57,6 +62,56 @@ function createResource({
   trimData,
   needsProxy = false,
 }: ResourceInput): Resource | VideoResource | GifResource {
+  type = type || getTypeFromMime(mimeType);
+  if (type === ResourceType.VIDEO) {
+    return {
+      baseColor,
+      blurHash,
+      type,
+      mimeType,
+      creationDate,
+      src,
+      width: Number(width || 0),
+      height: Number(height || 0),
+      poster,
+      posterId,
+      id,
+      length,
+      lengthFormatted,
+      alt,
+      sizes: normalizeResourceSizes(sizes),
+      attribution,
+      isPlaceholder,
+      isOptimized,
+      isMuted,
+      isExternal,
+      trimData,
+      needsProxy,
+    };
+  }
+  if (type === ResourceType.GIF) {
+    return {
+      baseColor,
+      blurHash,
+      type,
+      mimeType,
+      creationDate,
+      src,
+      width: Number(width || 0),
+      height: Number(height || 0),
+      poster,
+      posterId,
+      id,
+      alt,
+      sizes: normalizeResourceSizes(sizes),
+      attribution,
+      output,
+      isPlaceholder,
+      isOptimized,
+      isExternal,
+      needsProxy,
+    };
+  }
   return {
     baseColor,
     blurHash,
@@ -66,20 +121,12 @@ function createResource({
     src,
     width: Number(width || 0),
     height: Number(height || 0),
-    poster,
-    posterId,
     id,
-    length,
-    lengthFormatted,
     alt,
     sizes: normalizeResourceSizes(sizes),
     attribution,
-    output,
     isPlaceholder,
-    isOptimized,
-    isMuted,
     isExternal,
-    trimData,
     needsProxy,
   };
 }

packages/media/src/generateVideoStrip.ts

@@ -14,13 +14,17 @@
  * limitations under the License.
  */
 
+/**
+ * External dependencies
+ */
+import type { VideoResource } from '@googleforcreators/types';
+
 /**
  * Internal dependencies
  */
 import getMediaSizePositionProps from './getMediaSizePositionProps';
 import preloadVideo from './preloadVideo';
 import seekVideo from './seekVideo';
-import type { VideoResource } from './types';
 
 const CACHE: Map<string, string> = new Map();
 

packages/media/src/getImageDimensions.ts

@@ -14,11 +14,15 @@
  * limitations under the License.
  */
 
+/**
+ * External dependencies
+ */
+import type { Dimensions } from '@googleforcreators/types';
+
 /**
  * Internal dependencies
  */
 import preloadImage from './preloadImage';
-import type { Dimensions } from './types';
 
 /**
  * Get image dimensions from an image.

packages/media/src/getMediaSizePositionProps.ts

@@ -15,9 +15,9 @@
  */
 
 /**
- * Internal dependencies
+ * External dependencies
  */
-import type { Resource } from './types';
+import type { Resource } from '@googleforcreators/types';
 
 interface MediaSizePositionProps {
   width: number;

packages/media/src/getSmallestUrlForWidth.ts

@@ -14,11 +14,15 @@
  * limitations under the License.
  */
 
+/**
+ * External dependencies
+ */
+import type { Resource } from '@googleforcreators/types';
+
 /**
  * Internal dependencies
  */
 import aspectRatiosApproximatelyMatch from './aspectRatiosApproximatelyMatch';
-import type { Resource } from './types';
 
 /**
  * Choose the source URL of the smallest available size image / video wider than

packages/media/src/getTypeFromMime.ts

@@ -15,9 +15,9 @@
  */
 
 /**
- * Internal dependencies
+ * External dependencies
  */
-import type { ResourceType } from './types';
+import type { ResourceType } from '@googleforcreators/types';
 
 /**
  * Infer element type from mime type of its resource

packages/media/src/normalizeResourceSizes.ts

@@ -15,9 +15,9 @@
  */
 
 /**
- * Internal dependencies
+ * External dependencies
  */
-import type { ResourceSize } from './types';
+import type { ResourceSize } from '@googleforcreators/types';
 
 interface ResourceSizeInput {
   width: number | string;

packages/media/src/resourceList.ts

@@ -15,9 +15,9 @@
  */
 
 /**
- * Internal dependencies
+ * External dependencies
  */
-import type { ResourceId } from './types';
+import type { ResourceId } from '@googleforcreators/types';
 
 interface ResourceCacheEntry {
   url: string;