expo-image-theme-colors 0.1.0

package/README.md

@@ -0,0 +1,5 @@
+# expo-image-theme-colors
+
+BBPlayer 项目内使用。
+
+基于 Android Palette 实现的图片主题色提取，只支持传入 Expo 的 `ImageRef` 对象，实现零拷贝提取。（可通过 `expo-image` 库获取该对象）

package/build/ExpoImageThemeColors.types.d.ts

@@ -0,0 +1,25 @@
+/**
+ * 代表一个 swatch 的所有信息
+ */
+export interface ColorInfo {
+    /** 颜色的 6 位 Hex 值 (e.g., "#FF0000") */
+    hex: string;
+    /** 推荐的标题文本颜色 (e.g., "#FFFFFF") */
+    titleTextColor: string;
+    /** 推荐的正文文本颜色 (e.g., "#000000") */
+    bodyTextColor: string;
+    /** 这个颜色在图片中占了多少像素点 */
+    population: number;
+}
+type SwatchName = 'dominant' | 'vibrant' | 'lightVibrant' | 'darkVibrant' | 'muted' | 'lightMuted' | 'darkMuted';
+type PaletteSwatches = {
+    [K in SwatchName]: ColorInfo | null;
+};
+export type ExtractedPalette = {
+    /** 图片宽度 (px) */
+    width: number;
+    /** 图片高度 (px) */
+    height: number;
+} & PaletteSwatches;
+export {};
+//# sourceMappingURL=ExpoImageThemeColors.types.d.ts.map

package/build/ExpoImageThemeColors.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExpoImageThemeColors.types.d.ts","sourceRoot":"","sources":["../src/ExpoImageThemeColors.types.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,MAAM,WAAW,SAAS;IACxB,sCAAsC;IACtC,GAAG,EAAE,MAAM,CAAC;IAEZ,kCAAkC;IAClC,cAAc,EAAE,MAAM,CAAC;IAEvB,kCAAkC;IAClC,aAAa,EAAE,MAAM,CAAC;IAEtB,sBAAsB;IACtB,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,KAAK,UAAU,GACX,UAAU,GACV,SAAS,GACT,cAAc,GACd,aAAa,GACb,OAAO,GACP,YAAY,GACZ,WAAW,CAAC;AAEhB,KAAK,eAAe,GAAG;KACpB,CAAC,IAAI,UAAU,GAAG,SAAS,GAAG,IAAI;CACpC,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,gBAAgB;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,gBAAgB;IAChB,MAAM,EAAE,MAAM,CAAC;CAChB,GAAG,eAAe,CAAC"}

package/build/ExpoImageThemeColors.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=ExpoImageThemeColors.types.js.map

package/build/ExpoImageThemeColors.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExpoImageThemeColors.types.js","sourceRoot":"","sources":["../src/ExpoImageThemeColors.types.ts"],"names":[],"mappings":"","sourcesContent":["/**\n * 代表一个 swatch 的所有信息\n */\nexport interface ColorInfo {\n  /** 颜色的 6 位 Hex 值 (e.g., \"#FF0000\") */\n  hex: string;\n  \n  /** 推荐的标题文本颜色 (e.g., \"#FFFFFF\") */\n  titleTextColor: string;\n  \n  /** 推荐的正文文本颜色 (e.g., \"#000000\") */\n  bodyTextColor: string;\n  \n  /** 这个颜色在图片中占了多少像素点 */\n  population: number;\n}\n\ntype SwatchName = \n  | 'dominant'\n  | 'vibrant'\n  | 'lightVibrant'\n  | 'darkVibrant'\n  | 'muted'\n  | 'lightMuted'\n  | 'darkMuted';\n\ntype PaletteSwatches = {\n  [K in SwatchName]: ColorInfo | null;\n};\n\nexport type ExtractedPalette = {\n  /** 图片宽度 (px) */\n  width: number;\n  /** 图片高度 (px) */\n  height: number;\n} & PaletteSwatches;"]}

package/build/ExpoImageThemeColorsModule.d.ts

@@ -0,0 +1,9 @@
+import { NativeModule, SharedRef } from 'expo';
+import { ExtractedPalette } from './ExpoImageThemeColors.types';
+import { ImageRef } from './ImageRef';
+declare class ExpoImageThemeColorsModule extends NativeModule {
+    extractThemeColorAsync(source: string | SharedRef<'image'> | ImageRef): Promise<ExtractedPalette>;
+}
+declare const _default: ExpoImageThemeColorsModule;
+export default _default;
+//# sourceMappingURL=ExpoImageThemeColorsModule.d.ts.map

package/build/ExpoImageThemeColorsModule.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExpoImageThemeColorsModule.d.ts","sourceRoot":"","sources":["../src/ExpoImageThemeColorsModule.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAuB,SAAS,EAAE,MAAM,MAAM,CAAC;AACpE,OAAO,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAChE,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEtC,OAAO,OAAO,0BAA2B,SAAQ,YAAY;IAC3D,sBAAsB,CAAC,MAAM,EAAE,MAAM,GAAG,SAAS,CAAC,OAAO,CAAC,GAAG,QAAQ,GAAG,OAAO,CAAC,gBAAgB,CAAC;CAClG;;AAED,wBAAuF"}

package/build/ExpoImageThemeColorsModule.js

@@ -0,0 +1,3 @@
+import { requireNativeModule } from 'expo';
+export default requireNativeModule('ExpoImageThemeColors');
+//# sourceMappingURL=ExpoImageThemeColorsModule.js.map

package/build/ExpoImageThemeColorsModule.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExpoImageThemeColorsModule.js","sourceRoot":"","sources":["../src/ExpoImageThemeColorsModule.ts"],"names":[],"mappings":"AAAA,OAAO,EAAgB,mBAAmB,EAAa,MAAM,MAAM,CAAC;AAQpE,eAAe,mBAAmB,CAA6B,sBAAsB,CAAC,CAAC","sourcesContent":["import { NativeModule, requireNativeModule, SharedRef } from 'expo';\nimport { ExtractedPalette } from './ExpoImageThemeColors.types';\nimport { ImageRef } from './ImageRef';\n\ndeclare class ExpoImageThemeColorsModule extends NativeModule {\n  extractThemeColorAsync(source: string | SharedRef<'image'> | ImageRef): Promise<ExtractedPalette>;\n}\n\nexport default requireNativeModule<ExpoImageThemeColorsModule>('ExpoImageThemeColors');\n"]}

package/build/ImageRef.d.ts

@@ -0,0 +1,17 @@
+import { SharedRef } from 'expo';
+/**
+ * A reference to a native instance of the image.
+ */
+export declare class ImageRef extends SharedRef<'image'> {
+    /**
+     * Width of the image.
+     */
+    width: number;
+    /**
+     * Height of the image.
+     */
+    height: number;
+}
+declare const _default: typeof ImageRef;
+export default _default;
+//# sourceMappingURL=ImageRef.d.ts.map

package/build/ImageRef.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageRef.d.ts","sourceRoot":"","sources":["../src/ImageRef.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,MAAM,CAAC;AAIjC;;GAEG;AACH,MAAM,CAAC,OAAO,OAAO,QAAS,SAAQ,SAAS,CAAC,OAAO,CAAC;IACtD;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,MAAM,EAAE,MAAM,CAAC;CAChB;wBAE+C,OAAO,QAAQ;AAA/D,wBAAgE"}

package/build/ImageRef.js

@@ -0,0 +1,3 @@
+import ExpoImageThemeColors from './ExpoImageThemeColorsModule';
+export default ExpoImageThemeColors.ImageRef;
+//# sourceMappingURL=ImageRef.js.map

package/build/ImageRef.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageRef.js","sourceRoot":"","sources":["../src/ImageRef.ts"],"names":[],"mappings":"AAEA,OAAO,oBAAoB,MAAM,8BAA8B,CAAC;AAiBhE,eAAe,oBAAoB,CAAC,QAA2B,CAAC","sourcesContent":["import { SharedRef } from 'expo';\n\nimport ExpoImageThemeColors from './ExpoImageThemeColorsModule';\n\n/**\n * A reference to a native instance of the image.\n */\nexport declare class ImageRef extends SharedRef<'image'> {\n  /**\n   * Width of the image.\n   */\n  width: number;\n\n  /**\n   * Height of the image.\n   */\n  height: number;\n}\n\nexport default ExpoImageThemeColors.ImageRef as typeof ImageRef;"]}

package/build/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from './ExpoImageThemeColorsModule';
+export * from './ExpoImageThemeColors.types';
+//# sourceMappingURL=index.d.ts.map

package/build/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,8BAA8B,CAAC;AACvD,cAAc,8BAA8B,CAAC"}

package/build/index.js

@@ -0,0 +1,3 @@
+export { default } from './ExpoImageThemeColorsModule';
+export * from './ExpoImageThemeColors.types';
+//# sourceMappingURL=index.js.map

package/build/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,8BAA8B,CAAC;AACvD,cAAc,8BAA8B,CAAC","sourcesContent":["export { default } from './ExpoImageThemeColorsModule';\nexport * from './ExpoImageThemeColors.types';\n"]}

package/expo-module.config.json

@@ -0,0 +1,6 @@
+{
+  "platforms": ["android"],
+  "android": {
+    "modules": ["expo.modules.imagethemecolors.ExpoImageThemeColorsModule"]
+  }
+}

package/package.json

@@ -0,0 +1,58 @@
+{
+  "name": "expo-image-theme-colors",
+  "version": "0.1.0",
+  "description": "A module to extract theme colors using expo ImageRef",
+  "main": "build/index.js",
+  "types": "build/index.d.ts",
+  "scripts": {
+    "build": "expo-module build",
+    "clean": "expo-module clean",
+    "lint": "expo-module lint",
+    "test": "expo-module test",
+    "prepare": "expo-module prepare",
+    "prepublishOnly": "expo-module prepublishOnly",
+    "expo-module": "expo-module",
+    "open:ios": "xed example/ios",
+    "open:android": "open -a \"Android Studio\" example/android"
+  },
+  "keywords": [
+    "react-native",
+    "expo",
+    "expo-image-theme-colors",
+    "ExpoImageThemeColors",
+    "theme-extraction",
+    "color-palette"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/bbplayer-app/expo-image-theme-colors.git"
+  },
+  "bugs": {
+    "url": "https://github.com/bbplayer-app/expo-image-theme-colors/issues"
+  },
+  "author": "Roitium <65794453+roitium@users.noreply.github.com> (https://github.com/roitium)",
+  "license": "MIT",
+  "homepage": "https://github.com/bbplayer-app/expo-image-theme-colors#readme",
+  "dependencies": {},
+  "devDependencies": {
+    "@types/react": "~19.1.0",
+    "expo-module-scripts": "^5.0.7",
+    "expo": "^54.0.18",
+    "react-native": "0.81.5"
+  },
+  "peerDependencies": {
+    "expo": "*",
+    "react": "*",
+    "react-native": "*"
+  },
+  "files": [
+    "build",
+    "src",
+    "expo-module.config.json"
+  ],
+  "sideEffects": false,
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  }
+}

package/src/ExpoImageThemeColors.types.ts

@@ -0,0 +1,36 @@
+/**
+ * 代表一个 swatch 的所有信息
+ */
+export interface ColorInfo {
+  /** 颜色的 6 位 Hex 值 (e.g., "#FF0000") */
+  hex: string;
+  
+  /** 推荐的标题文本颜色 (e.g., "#FFFFFF") */
+  titleTextColor: string;
+  
+  /** 推荐的正文文本颜色 (e.g., "#000000") */
+  bodyTextColor: string;
+  
+  /** 这个颜色在图片中占了多少像素点 */
+  population: number;
+}
+
+type SwatchName = 
+  | 'dominant'
+  | 'vibrant'
+  | 'lightVibrant'
+  | 'darkVibrant'
+  | 'muted'
+  | 'lightMuted'
+  | 'darkMuted';
+
+type PaletteSwatches = {
+  [K in SwatchName]: ColorInfo | null;
+};
+
+export type ExtractedPalette = {
+  /** 图片宽度 (px) */
+  width: number;
+  /** 图片高度 (px) */
+  height: number;
+} & PaletteSwatches;

package/src/ExpoImageThemeColorsModule.ts

@@ -0,0 +1,9 @@
+import { NativeModule, requireNativeModule, SharedRef } from 'expo';
+import { ExtractedPalette } from './ExpoImageThemeColors.types';
+import { ImageRef } from './ImageRef';
+
+declare class ExpoImageThemeColorsModule extends NativeModule {
+  extractThemeColorAsync(source: string | SharedRef<'image'> | ImageRef): Promise<ExtractedPalette>;
+}
+
+export default requireNativeModule<ExpoImageThemeColorsModule>('ExpoImageThemeColors');

package/src/ImageRef.ts

@@ -0,0 +1,20 @@
+import { SharedRef } from 'expo';
+
+import ExpoImageThemeColors from './ExpoImageThemeColorsModule';
+
+/**
+ * A reference to a native instance of the image.
+ */
+export declare class ImageRef extends SharedRef<'image'> {
+  /**
+   * Width of the image.
+   */
+  width: number;
+
+  /**
+   * Height of the image.
+   */
+  height: number;
+}
+
+export default ExpoImageThemeColors.ImageRef as typeof ImageRef;

package/src/index.ts

@@ -0,0 +1,2 @@
+export { default } from './ExpoImageThemeColorsModule';
+export * from './ExpoImageThemeColors.types';