Some progress on porting frontend

frontend-vue/src/components/user/ProfilePicture.vue

@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import { toSvg} from 'jdenticon'
+import type { MediaMetadata } from '@/stores/media.ts'
+import { Vibrant } from 'node-vibrant/node'
+import { useTemplateRef } from 'vue'
+import { vi } from 'vitest'
+
+const props = defineProps<{
+    media?: MediaMetadata
+    username: string
+  }>()
+
+/* async function calcBackgroundColor() {
+  const imgWrapper = useTemplateRef<HTMLImageElement>("profilePicture");
+  if (!imgWrapper) return;
+  const img = imgWrapper.value;
+  if (!img) return null;
+  const vibrant = Vibrant.from(img).build();
+  const palette = await vibrant.getPalette();
+  if (!palette.Vibrant) return;
+  const r = (255 - palette.Vibrant.r).toString(16),
+    g = (255 - palette.Vibrant.g).toString(16),
+    b = (255 - palette.Vibrant.b).toString(16);
+  // pad each with zeros and return
+  return '#' + padZero(r) + padZero(g) + padZero(b);
+}
+
+function padZero(str: string, len?: number): string {
+  len = len || 2;
+  const zeros = new Array(len).join('0');
+  return (zeros + str).slice(-len);
+}
+
+async function calcBackgroundStyle() {
+  const color = await calcBackgroundColor();
+  if (!color) return "";
+  return "background-color: "+color;
+}
+*/
+</script>
+
+<template>
+  <div v-if="props.media" aria-label="profile picture">
+    <!-- TODO: Inverted primary color of image
+     Get primary color of the image, invert it and set as background for higher contrast in case of transparency
+     calcBackgroundStyle *should* do it, but async and vue no like
+     -->
+    <img :src="props.media.url"  :alt="props.media.alt" height="52" width="52" ref="profilePicture"/>
+  </div>
+  <div
+    v-else
+    aria-label="profile picture"
+    aria-description="No profile picture set, this is a generated identicon"
+  >
+    <div v-html="toSvg(props.username, 128)" aria-hidden="true"/>
+  </div>
+</template>