Merge branch 'fix-mp3-download-while-authenticated' into sara/fix-api-auth

This commit is contained in:
Sara
2023-11-03 12:10:48 +01:00
54 changed files with 2756 additions and 763 deletions

View File

@@ -3,6 +3,7 @@ import Modal from "../modal";
import useTranscript from "../useTranscript";
import useTopics from "../useTopics";
import useWaveform from "../useWaveform";
import useMp3 from "../useMp3";
import { TopicList } from "../topicList";
import Recorder from "../recorder";
import { Topic } from "../webSocketTypes";
@@ -28,6 +29,7 @@ export default function TranscriptDetails(details: TranscriptDetails) {
const topics = useTopics(protectedPath, transcriptId);
const waveform = useWaveform(protectedPath, transcriptId);
const useActiveTopic = useState<Topic | null>(null);
const mp3 = useMp3(api, transcriptId);
if (transcript?.error /** || topics?.error || waveform?.error **/) {
return (
@@ -62,6 +64,7 @@ export default function TranscriptDetails(details: TranscriptDetails) {
waveform={waveform?.waveform}
isPastMeeting={true}
transcriptId={transcript?.response?.id}
mp3Blob={mp3.blob}
/>
)}
</div>

View File

@@ -30,6 +30,7 @@ type RecorderProps = {
waveform?: AudioWaveform | null;
isPastMeeting: boolean;
transcriptId?: string | null;
mp3Blob?: Blob | null;
};
export default function Recorder(props: RecorderProps) {
@@ -108,11 +109,7 @@ export default function Recorder(props: RecorderProps) {
if (waveformRef.current) {
const _wavesurfer = WaveSurfer.create({
container: waveformRef.current,
url: props.transcriptId
? `${process.env.NEXT_PUBLIC_API_URL}/v1/transcripts/${props.transcriptId}/audio/mp3`
: undefined,
peaks: props.waveform?.data,
hideScrollbar: true,
autoCenter: true,
barWidth: 2,
@@ -146,6 +143,10 @@ export default function Recorder(props: RecorderProps) {
if (props.isPastMeeting) _wavesurfer.toggleInteraction(true);
if (props.mp3Blob) {
_wavesurfer.loadBlob(props.mp3Blob);
}
setWavesurfer(_wavesurfer);
return () => {
@@ -157,6 +158,12 @@ export default function Recorder(props: RecorderProps) {
}
}, []);
useEffect(() => {
if (!wavesurfer) return;
if (!props.mp3Blob) return;
wavesurfer.loadBlob(props.mp3Blob);
}, [props.mp3Blob]);
useEffect(() => {
topicsRef.current = props.topics;
if (!isRecording) renderMarkers();

View File

@@ -7,6 +7,7 @@ import {
import { formatTime } from "../../lib/time";
import ScrollToBottom from "./scrollToBottom";
import { Topic } from "./webSocketTypes";
import { generateHighContrastColor } from "../../lib/utils";
type TopicListProps = {
topics: Topic[];
@@ -103,7 +104,37 @@ export function TopicList({
/>
</div>
{activeTopic?.id == topic.id && (
<div className="p-2">{topic.transcript}</div>
<div className="p-2">
{topic.segments ? (
<>
{topic.segments.map((segment, index: number) => (
<p
key={index}
className="text-left text-slate-500 text-sm md:text-base"
>
<span className="font-mono text-slate-500">
[{formatTime(segment.start)}]
</span>
<span
className="font-bold text-slate-500"
style={{
color: generateHighContrastColor(
`Speaker ${segment.speaker}`,
[96, 165, 250],
),
}}
>
{" "}
(Speaker {segment.speaker}):
</span>{" "}
<span>{segment.text}</span>
</p>
))}
</>
) : (
<>{topic.transcript}</>
)}
</div>
)}
</button>
))}

View File

@@ -1,36 +1,64 @@
import { useEffect, useState } from "react";
import { useContext, useEffect, useState } from "react";
import {
DefaultApi,
V1TranscriptGetAudioMp3Request,
// V1TranscriptGetAudioMp3Request,
} from "../../api/apis/DefaultApi";
import {} from "../../api";
import { useError } from "../../(errors)/errorContext";
import { DomainContext } from "../domainContext";
type Mp3Response = {
url: string | null;
blob: Blob | null;
loading: boolean;
error: Error | null;
};
const useMp3 = (api: DefaultApi, id: string): Mp3Response => {
const [url, setUrl] = useState<string | null>(null);
const [blob, setBlob] = useState<Blob | null>(null);
const [loading, setLoading] = useState<boolean>(false);
const [error, setErrorState] = useState<Error | null>(null);
const { setError } = useError();
const { api_url } = useContext(DomainContext);
const getMp3 = (id: string) => {
if (!id) throw new Error("Transcript ID is required to get transcript Mp3");
if (!id) return;
setLoading(true);
const requestParameters: V1TranscriptGetAudioMp3Request = {
transcriptId: id,
};
api
.v1TranscriptGetAudioMp3(requestParameters)
.then((result) => {
setUrl(result);
setLoading(false);
console.debug("Transcript Mp3 loaded:", result);
// XXX Current API interface does not output a blob, we need to to is manually
// const requestParameters: V1TranscriptGetAudioMp3Request = {
// transcriptId: id,
// };
// api
// .v1TranscriptGetAudioMp3(requestParameters)
// .then((result) => {
// setUrl(result);
// setLoading(false);
// console.debug("Transcript Mp3 loaded:", result);
// })
// .catch((err) => {
// setError(err);
// setErrorState(err);
// });
const localUrl = `${api_url}/v1/transcripts/${id}/audio/mp3`;
if (localUrl == url) return;
const headers = new Headers();
if (api.configuration.configuration.accessToken) {
headers.set("Authorization", api.configuration.configuration.accessToken);
}
fetch(localUrl, {
method: "GET",
headers,
})
.then((response) => {
setUrl(localUrl);
response.blob().then((blob) => {
setBlob(blob);
setLoading(false);
});
})
.catch((err) => {
setError(err);
@@ -42,7 +70,7 @@ const useMp3 = (api: DefaultApi, id: string): Mp3Response => {
getMp3(id);
}, [id]);
return { url, loading, error };
return { url, blob, loading, error };
};
export default useMp3;

View File

@@ -58,6 +58,39 @@ export const useWebSockets = (transcriptId: string | null): UseWebSockets => {
title: "Topic 1: Introduction to Quantum Mechanics",
transcript:
"A brief overview of quantum mechanics and its principles.",
segments: [
{
speaker: 1,
start: 0,
text: "This is the transcription of an example title",
},
{
speaker: 2,
start: 10,
text: "This is the second speaker",
},
,
{
speaker: 3,
start: 90,
text: "This is the third speaker",
},
{
speaker: 4,
start: 90,
text: "This is the fourth speaker",
},
{
speaker: 5,
start: 123,
text: "This is the fifth speaker",
},
{
speaker: 6,
start: 300,
text: "This is the sixth speaker",
},
],
},
{
id: "2",
@@ -66,6 +99,18 @@ export const useWebSockets = (transcriptId: string | null): UseWebSockets => {
title: "Topic 2: Machine Learning Algorithms",
transcript:
"Understanding the different types of machine learning algorithms.",
segments: [
{
speaker: 1,
start: 0,
text: "This is the transcription of an example title",
},
{
speaker: 2,
start: 10,
text: "This is the second speaker",
},
],
},
{
id: "3",
@@ -73,6 +118,18 @@ export const useWebSockets = (transcriptId: string | null): UseWebSockets => {
summary: "This is test topic 3",
title: "Topic 3: Mental Health Awareness",
transcript: "Ways to improve mental health and reduce stigma.",
segments: [
{
speaker: 1,
start: 0,
text: "This is the transcription of an example title",
},
{
speaker: 2,
start: 10,
text: "This is the second speaker",
},
],
},
{
id: "4",
@@ -80,6 +137,18 @@ export const useWebSockets = (transcriptId: string | null): UseWebSockets => {
summary: "This is test topic 4",
title: "Topic 4: Basics of Productivity",
transcript: "Tips and tricks to increase daily productivity.",
segments: [
{
speaker: 1,
start: 0,
text: "This is the transcription of an example title",
},
{
speaker: 2,
start: 10,
text: "This is the second speaker",
},
],
},
{
id: "5",
@@ -88,6 +157,18 @@ export const useWebSockets = (transcriptId: string | null): UseWebSockets => {
title: "Topic 5: Future of Aviation",
transcript:
"Exploring the advancements and possibilities in aviation.",
segments: [
{
speaker: 1,
start: 0,
text: "This is the transcription of an example title",
},
{
speaker: 2,
start: 10,
text: "This is the second speaker",
},
],
},
]);
@@ -106,6 +187,18 @@ export const useWebSockets = (transcriptId: string | null): UseWebSockets => {
"Topic 1: Introduction to Quantum Mechanics, a brief overview of quantum mechanics and its principles.",
transcript:
"A brief overview of quantum mechanics and its principles.",
segments: [
{
speaker: 1,
start: 0,
text: "This is the transcription of an example title",
},
{
speaker: 2,
start: 10,
text: "This is the second speaker",
},
],
},
{
id: "2",
@@ -115,6 +208,18 @@ export const useWebSockets = (transcriptId: string | null): UseWebSockets => {
"Topic 2: Machine Learning Algorithms, understanding the different types of machine learning algorithms.",
transcript:
"Understanding the different types of machine learning algorithms.",
segments: [
{
speaker: 1,
start: 0,
text: "This is the transcription of an example title",
},
{
speaker: 2,
start: 10,
text: "This is the second speaker",
},
],
},
{
id: "3",
@@ -123,6 +228,18 @@ export const useWebSockets = (transcriptId: string | null): UseWebSockets => {
title:
"Topic 3: Mental Health Awareness, ways to improve mental health and reduce stigma.",
transcript: "Ways to improve mental health and reduce stigma.",
segments: [
{
speaker: 1,
start: 0,
text: "This is the transcription of an example title",
},
{
speaker: 2,
start: 10,
text: "This is the second speaker",
},
],
},
{
id: "4",
@@ -131,6 +248,18 @@ export const useWebSockets = (transcriptId: string | null): UseWebSockets => {
title:
"Topic 4: Basics of Productivity, tips and tricks to increase daily productivity.",
transcript: "Tips and tricks to increase daily productivity.",
segments: [
{
speaker: 1,
start: 0,
text: "This is the transcription of an example title",
},
{
speaker: 2,
start: 10,
text: "This is the second speaker",
},
],
},
{
id: "5",
@@ -140,6 +269,18 @@ export const useWebSockets = (transcriptId: string | null): UseWebSockets => {
"Topic 5: Future of Aviation, exploring the advancements and possibilities in aviation.",
transcript:
"Exploring the advancements and possibilities in aviation.",
segments: [
{
speaker: 1,
start: 0,
text: "This is the transcription of an example title",
},
{
speaker: 2,
start: 10,
text: "This is the second speaker",
},
],
},
]);
@@ -173,7 +314,17 @@ export const useWebSockets = (transcriptId: string | null): UseWebSockets => {
break;
case "TOPIC":
setTopics((prevTopics) => [...prevTopics, message.data]);
setTopics((prevTopics) => {
const topic = message.data as Topic;
const index = prevTopics.findIndex(
(prevTopic) => prevTopic.id === topic.id,
);
if (index >= 0) {
prevTopics[index] = topic;
return prevTopics;
}
return [...prevTopics, topic];
});
console.debug("TOPIC event:", message.data);
break;

View File

@@ -1,10 +1,6 @@
export type Topic = {
timestamp: number;
title: string;
transcript: string;
summary: string;
id: string;
};
import { GetTranscriptTopic } from "../../api";
export type Topic = GetTranscriptTopic;
export type Transcript = {
text: string;

View File

@@ -5,10 +5,11 @@ models/AudioWaveform.ts
models/CreateTranscript.ts
models/DeletionStatus.ts
models/GetTranscript.ts
models/GetTranscriptSegmentTopic.ts
models/GetTranscriptTopic.ts
models/HTTPValidationError.ts
models/PageGetTranscript.ts
models/RtcOffer.ts
models/TranscriptTopic.ts
models/UpdateTranscript.ts
models/UserInfo.ts
models/ValidationError.ts

View File

@@ -42,10 +42,6 @@ import {
UpdateTranscriptToJSON,
} from "../models";
export interface RtcOfferRequest {
rtcOffer: RtcOffer;
}
export interface V1TranscriptDeleteRequest {
transcriptId: any;
}
@@ -56,6 +52,7 @@ export interface V1TranscriptGetRequest {
export interface V1TranscriptGetAudioMp3Request {
transcriptId: any;
token?: any;
}
export interface V1TranscriptGetAudioWaveformRequest {
@@ -132,58 +129,6 @@ export class DefaultApi extends runtime.BaseAPI {
return await response.value();
}
/**
* Rtc Offer
*/
async rtcOfferRaw(
requestParameters: RtcOfferRequest,
initOverrides?: RequestInit | runtime.InitOverrideFunction,
): Promise<runtime.ApiResponse<any>> {
if (
requestParameters.rtcOffer === null ||
requestParameters.rtcOffer === undefined
) {
throw new runtime.RequiredError(
"rtcOffer",
"Required parameter requestParameters.rtcOffer was null or undefined when calling rtcOffer.",
);
}
const queryParameters: any = {};
const headerParameters: runtime.HTTPHeaders = {};
headerParameters["Content-Type"] = "application/json";
const response = await this.request(
{
path: `/offer`,
method: "POST",
headers: headerParameters,
query: queryParameters,
body: RtcOfferToJSON(requestParameters.rtcOffer),
},
initOverrides,
);
if (this.isJsonMime(response.headers.get("content-type"))) {
return new runtime.JSONApiResponse<any>(response);
} else {
return new runtime.TextApiResponse(response) as any;
}
}
/**
* Rtc Offer
*/
async rtcOffer(
requestParameters: RtcOfferRequest,
initOverrides?: RequestInit | runtime.InitOverrideFunction,
): Promise<any> {
const response = await this.rtcOfferRaw(requestParameters, initOverrides);
return await response.value();
}
/**
* Transcript Delete
*/
@@ -325,6 +270,10 @@ export class DefaultApi extends runtime.BaseAPI {
const queryParameters: any = {};
if (requestParameters.token !== undefined) {
queryParameters["token"] = requestParameters.token;
}
const headerParameters: runtime.HTTPHeaders = {};
if (this.configuration && this.configuration.accessToken) {

View File

@@ -0,0 +1,88 @@
/* tslint:disable */
/* eslint-disable */
/**
* FastAPI
* No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
*
* The version of the OpenAPI document: 0.1.0
*
*
* NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
* https://openapi-generator.tech
* Do not edit the class manually.
*/
import { exists, mapValues } from "../runtime";
/**
*
* @export
* @interface GetTranscriptSegmentTopic
*/
export interface GetTranscriptSegmentTopic {
/**
*
* @type {any}
* @memberof GetTranscriptSegmentTopic
*/
text: any | null;
/**
*
* @type {any}
* @memberof GetTranscriptSegmentTopic
*/
start: any | null;
/**
*
* @type {any}
* @memberof GetTranscriptSegmentTopic
*/
speaker: any | null;
}
/**
* Check if a given object implements the GetTranscriptSegmentTopic interface.
*/
export function instanceOfGetTranscriptSegmentTopic(value: object): boolean {
let isInstance = true;
isInstance = isInstance && "text" in value;
isInstance = isInstance && "start" in value;
isInstance = isInstance && "speaker" in value;
return isInstance;
}
export function GetTranscriptSegmentTopicFromJSON(
json: any,
): GetTranscriptSegmentTopic {
return GetTranscriptSegmentTopicFromJSONTyped(json, false);
}
export function GetTranscriptSegmentTopicFromJSONTyped(
json: any,
ignoreDiscriminator: boolean,
): GetTranscriptSegmentTopic {
if (json === undefined || json === null) {
return json;
}
return {
text: json["text"],
start: json["start"],
speaker: json["speaker"],
};
}
export function GetTranscriptSegmentTopicToJSON(
value?: GetTranscriptSegmentTopic | null,
): any {
if (value === undefined) {
return undefined;
}
if (value === null) {
return null;
}
return {
text: value.text,
start: value.start,
speaker: value.speaker,
};
}

View File

@@ -0,0 +1,112 @@
/* tslint:disable */
/* eslint-disable */
/**
* FastAPI
* No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
*
* The version of the OpenAPI document: 0.1.0
*
*
* NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
* https://openapi-generator.tech
* Do not edit the class manually.
*/
import { exists, mapValues } from "../runtime";
/**
*
* @export
* @interface GetTranscriptTopic
*/
export interface GetTranscriptTopic {
/**
*
* @type {any}
* @memberof GetTranscriptTopic
*/
id: any | null;
/**
*
* @type {any}
* @memberof GetTranscriptTopic
*/
title: any | null;
/**
*
* @type {any}
* @memberof GetTranscriptTopic
*/
summary: any | null;
/**
*
* @type {any}
* @memberof GetTranscriptTopic
*/
timestamp: any | null;
/**
*
* @type {any}
* @memberof GetTranscriptTopic
*/
transcript: any | null;
/**
*
* @type {any}
* @memberof GetTranscriptTopic
*/
segments?: any | null;
}
/**
* Check if a given object implements the GetTranscriptTopic interface.
*/
export function instanceOfGetTranscriptTopic(value: object): boolean {
let isInstance = true;
isInstance = isInstance && "id" in value;
isInstance = isInstance && "title" in value;
isInstance = isInstance && "summary" in value;
isInstance = isInstance && "timestamp" in value;
isInstance = isInstance && "transcript" in value;
return isInstance;
}
export function GetTranscriptTopicFromJSON(json: any): GetTranscriptTopic {
return GetTranscriptTopicFromJSONTyped(json, false);
}
export function GetTranscriptTopicFromJSONTyped(
json: any,
ignoreDiscriminator: boolean,
): GetTranscriptTopic {
if (json === undefined || json === null) {
return json;
}
return {
id: json["id"],
title: json["title"],
summary: json["summary"],
timestamp: json["timestamp"],
transcript: json["transcript"],
segments: !exists(json, "segments") ? undefined : json["segments"],
};
}
export function GetTranscriptTopicToJSON(
value?: GetTranscriptTopic | null,
): any {
if (value === undefined) {
return undefined;
}
if (value === null) {
return null;
}
return {
id: value.id,
title: value.title,
summary: value.summary,
timestamp: value.timestamp,
transcript: value.transcript,
segments: value.segments,
};
}

View File

@@ -0,0 +1,88 @@
/* tslint:disable */
/* eslint-disable */
/**
* FastAPI
* No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
*
* The version of the OpenAPI document: 0.1.0
*
*
* NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
* https://openapi-generator.tech
* Do not edit the class manually.
*/
import { exists, mapValues } from "../runtime";
/**
*
* @export
* @interface TranscriptSegmentTopic
*/
export interface TranscriptSegmentTopic {
/**
*
* @type {any}
* @memberof TranscriptSegmentTopic
*/
speaker: any | null;
/**
*
* @type {any}
* @memberof TranscriptSegmentTopic
*/
text: any | null;
/**
*
* @type {any}
* @memberof TranscriptSegmentTopic
*/
timestamp: any | null;
}
/**
* Check if a given object implements the TranscriptSegmentTopic interface.
*/
export function instanceOfTranscriptSegmentTopic(value: object): boolean {
let isInstance = true;
isInstance = isInstance && "speaker" in value;
isInstance = isInstance && "text" in value;
isInstance = isInstance && "timestamp" in value;
return isInstance;
}
export function TranscriptSegmentTopicFromJSON(
json: any,
): TranscriptSegmentTopic {
return TranscriptSegmentTopicFromJSONTyped(json, false);
}
export function TranscriptSegmentTopicFromJSONTyped(
json: any,
ignoreDiscriminator: boolean,
): TranscriptSegmentTopic {
if (json === undefined || json === null) {
return json;
}
return {
speaker: json["speaker"],
text: json["text"],
timestamp: json["timestamp"],
};
}
export function TranscriptSegmentTopicToJSON(
value?: TranscriptSegmentTopic | null,
): any {
if (value === undefined) {
return undefined;
}
if (value === null) {
return null;
}
return {
speaker: value.speaker,
text: value.text,
timestamp: value.timestamp,
};
}

View File

@@ -42,13 +42,13 @@ export interface TranscriptTopic {
* @type {any}
* @memberof TranscriptTopic
*/
transcript?: any | null;
timestamp: any | null;
/**
*
* @type {any}
* @memberof TranscriptTopic
*/
timestamp: any | null;
segments?: any | null;
}
/**
@@ -78,8 +78,8 @@ export function TranscriptTopicFromJSONTyped(
id: !exists(json, "id") ? undefined : json["id"],
title: json["title"],
summary: json["summary"],
transcript: !exists(json, "transcript") ? undefined : json["transcript"],
timestamp: json["timestamp"],
segments: !exists(json, "segments") ? undefined : json["segments"],
};
}
@@ -94,7 +94,7 @@ export function TranscriptTopicToJSON(value?: TranscriptTopic | null): any {
id: value.id,
title: value.title,
summary: value.summary,
transcript: value.transcript,
timestamp: value.timestamp,
segments: value.segments,
};
}

View File

@@ -4,10 +4,11 @@ export * from "./AudioWaveform";
export * from "./CreateTranscript";
export * from "./DeletionStatus";
export * from "./GetTranscript";
export * from "./GetTranscriptSegmentTopic";
export * from "./GetTranscriptTopic";
export * from "./HTTPValidationError";
export * from "./PageGetTranscript";
export * from "./RtcOffer";
export * from "./TranscriptTopic";
export * from "./UpdateTranscript";
export * from "./UserInfo";
export * from "./ValidationError";

View File

@@ -1,3 +1,123 @@
export function isDevelopment() {
return process.env.NEXT_PUBLIC_ENV === "development";
}
// Function to calculate WCAG contrast ratio
export const getContrastRatio = (
foreground: [number, number, number],
background: [number, number, number],
) => {
const [r1, g1, b1] = foreground;
const [r2, g2, b2] = background;
const lum1 =
0.2126 * Math.pow(r1 / 255, 2.2) +
0.7152 * Math.pow(g1 / 255, 2.2) +
0.0722 * Math.pow(b1 / 255, 2.2);
const lum2 =
0.2126 * Math.pow(r2 / 255, 2.2) +
0.7152 * Math.pow(g2 / 255, 2.2) +
0.0722 * Math.pow(b2 / 255, 2.2);
return (Math.max(lum1, lum2) + 0.05) / (Math.min(lum1, lum2) + 0.05);
};
// Function to hash string into 32-bit integer
// 🔴 DO NOT USE FOR CRYPTOGRAPHY PURPOSES 🔴
export function murmurhash3_32_gc(key: string, seed: number = 0) {
let remainder, bytes, h1, h1b, c1, c2, k1, i;
remainder = key.length & 3; // key.length % 4
bytes = key.length - remainder;
h1 = seed;
c1 = 0xcc9e2d51;
c2 = 0x1b873593;
i = 0;
while (i < bytes) {
k1 =
(key.charCodeAt(i) & 0xff) |
((key.charCodeAt(++i) & 0xff) << 8) |
((key.charCodeAt(++i) & 0xff) << 16) |
((key.charCodeAt(++i) & 0xff) << 24);
++i;
k1 =
((k1 & 0xffff) * c1 + ((((k1 >>> 16) * c1) & 0xffff) << 16)) & 0xffffffff;
k1 = (k1 << 15) | (k1 >>> 17);
k1 =
((k1 & 0xffff) * c2 + ((((k1 >>> 16) * c2) & 0xffff) << 16)) & 0xffffffff;
h1 ^= k1;
h1 = (h1 << 13) | (h1 >>> 19);
h1b =
((h1 & 0xffff) * 5 + ((((h1 >>> 16) * 5) & 0xffff) << 16)) & 0xffffffff;
h1 = (h1b & 0xffff) + 0x6b64 + ((((h1b >>> 16) + 0xe654) & 0xffff) << 16);
}
k1 = 0;
switch (remainder) {
case 3:
k1 ^= (key.charCodeAt(i + 2) & 0xff) << 16;
case 2:
k1 ^= (key.charCodeAt(i + 1) & 0xff) << 8;
case 1:
k1 ^= key.charCodeAt(i) & 0xff;
k1 =
((k1 & 0xffff) * c1 + ((((k1 >>> 16) * c1) & 0xffff) << 16)) &
0xffffffff;
k1 = (k1 << 15) | (k1 >>> 17);
k1 =
((k1 & 0xffff) * c2 + ((((k1 >>> 16) * c2) & 0xffff) << 16)) &
0xffffffff;
h1 ^= k1;
}
h1 ^= key.length;
h1 ^= h1 >>> 16;
h1 =
((h1 & 0xffff) * 0x85ebca6b +
((((h1 >>> 16) * 0x85ebca6b) & 0xffff) << 16)) &
0xffffffff;
h1 ^= h1 >>> 13;
h1 =
((h1 & 0xffff) * 0xc2b2ae35 +
((((h1 >>> 16) * 0xc2b2ae35) & 0xffff) << 16)) &
0xffffffff;
h1 ^= h1 >>> 16;
return h1 >>> 0;
}
// Generates a color that is guaranteed to have high contrast with the given background color (optional)
export const generateHighContrastColor = (
name: string,
backgroundColor: [number, number, number] | null = null,
) => {
const hash = murmurhash3_32_gc(name);
let red = (hash & 0xff0000) >> 16;
let green = (hash & 0x00ff00) >> 8;
let blue = hash & 0x0000ff;
const getCssColor = (red: number, green: number, blue: number) =>
`rgb(${red}, ${green}, ${blue})`;
if (!backgroundColor) return getCssColor(red, green, blue);
const contrast = getContrastRatio([red, green, blue], backgroundColor);
// Adjust the color to achieve better contrast if necessary (WCAG recommends at least 4.5:1 for text)
if (contrast < 4.5) {
red = Math.abs(255 - red);
green = Math.abs(255 - green);
blue = Math.abs(255 - blue);
}
return getCssColor(red, green, blue);
};