Something went wrong. Try again.
This repository has no description
Something went wrong. Try again.
2.4 kB · 72 lines
TypeScript
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273// Skin tone preference for emoji insertion.//// We store frimousse's `SkinTone` string directly so the same value can be// fed to the visual picker and read back from the shortcode autocomplete// without translation. The integer index 0..5 is only used at the boundary// with the emojibase data's `s[]` skin array (see `skinToneIndex`).
import type { SkinTone } from "frimousse";import { useCallback, useState } from "react";
const STORAGE_KEY = "streamplace:skinTone";
// Reference emojis used to render the tray and trigger. 👋 is the standard// reference for skin tone pickers; its skin variants cover Fitzpatrick 1..5.export const SKIN_TONES: ReadonlyArray<{ key: SkinTone; label: string; emoji: string;}> = [ { key: "none", label: "Default", emoji: "👋" }, { key: "light", label: "Light", emoji: "👋🏻" }, { key: "medium-light", label: "Medium-light", emoji: "👋🏼" }, { key: "medium", label: "Medium", emoji: "👋🏽" }, { key: "medium-dark", label: "Medium-dark", emoji: "👋🏾" }, { key: "dark", label: "Dark", emoji: "👋🏿" },];
const KEY_TO_INDEX: Record<SkinTone, number> = { none: 0, light: 1, "medium-light": 2, medium: 3, "medium-dark": 4, dark: 5,};
const VALID_KEYS = new Set<SkinTone>(SKIN_TONES.map((t) => t.key));
function readStored(): SkinTone { if (typeof localStorage === "undefined") return "none"; const raw = localStorage.getItem(STORAGE_KEY); if (raw && (VALID_KEYS as Set<string>).has(raw)) return raw as SkinTone; return "none";}
function writeStored(value: SkinTone) { if (typeof localStorage === "undefined") return; localStorage.setItem(STORAGE_KEY, value);}
/** Convert a frimousse SkinTone to the array index used by emojibase's `s[]`. */export function skinToneIndex(tone: SkinTone): number { return KEY_TO_INDEX[tone] ?? 0;}
export function useSkinTone(): [SkinTone, (next: SkinTone) => void] { // Lazy init: read from localStorage on the first render so the value // is correct from the start. No useEffect needed. const [tone, setToneState] = useState<SkinTone>(readStored);
const setTone = useCallback((next: SkinTone) => { setToneState(next); writeStored(next); }, []);
return [tone, setTone];}
/** Returns the reference emoji for a given skin tone. */export function skinToneEmoji(tone: SkinTone): string { return SKIN_TONES.find((t) => t.key === tone)?.emoji ?? SKIN_TONES[0].emoji;}