Improve post creation

client/src/components/AudioPreview.vue

@@ -0,0 +1,208 @@
+<template>
+  <div class="preview-container">
+    <div class="erase" @click="$emit('delete')" :title="t('app.base.delete_audio')"></div>
+    <div class="audio-container">
+      <div class="audio-icon" v-on:dragstart="onDragStart($event)" :draggable="showPaste">
+        <fa-icon :icon="faMusic" />
+      </div>
+    </div>
+    <div class="info-container">
+      <div class="code">{{ hash.substring(0, Math.min(7, hash.length)) }} / {{ convertToHumanReadableFileSize(value.size) }}</div>
+      <strong :title="value.name">{{ value.name }}</strong>
+      <div class="button-container">
+        <button
+          class="btn btn-paste mx-1"
+          type="button"
+          v-if="showPaste"
+          @click="$emit('paste', getMarkdownString())"
+          :title="t('app.base.insert_audio')"
+        >
+          <fa-icon :icon="faFileImport"></fa-icon>
+        </button>
+        <button class="btn btn-softdelete mx-1" type="button" v-if="showDelete" @click="$emit('softdelete')" :title="t('app.base.remove')">
+          <fa-icon :icon="faEraser"></fa-icon>
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+<style scoped lang="scss">
+.erase {
+  width: 16px;
+  height: 16px;
+  right: -7px;
+  top: -7px;
+
+  display: block;
+  position: absolute;
+  z-index: 999;
+  background-color: #333;
+  border: 1px solid #555;
+  border-radius: 50%;
+  cursor: pointer;
+  transition-duration: 0.4s;
+
+  &:hover {
+    transition-duration: 0.4s;
+    background-color: #a00;
+  }
+
+  &:before {
+    position: absolute;
+    top: 0;
+    left: calc(50% - 3px);
+    z-index: 1000;
+    content: "\d7";
+    line-height: 12px;
+    font-size: 12px;
+    padding: 0;
+    margin: 0;
+    transform: scale(1.25);
+    color: #fff;
+    text-align: center;
+  }
+}
+
+.preview-container {
+  width: 150px;
+  margin: 0;
+  position: relative;
+  display: inline-block;
+  text-align: center;
+  background-color: #f8f9fa55;
+  border-radius: 0.375rem;
+  border: 1px solid #ccc;
+
+  .btn-paste {
+    color: #222;
+
+    &:hover {
+      color: #22222255;
+    }
+  }
+
+  .btn-softdelete {
+    color: #f18901;
+
+    &:hover {
+      color: #ffa836;
+    }
+  }
+
+  &:not(:last-child) {
+    margin-right: 15px;
+  }
+
+  .audio-container {
+    display: flex;
+    width: 148px;
+    height: auto;
+    aspect-ratio: 1/1;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    margin: 0;
+  }
+
+  .audio-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 80px;
+    height: 80px;
+    background-color: #e9ecef;
+    border: 2px solid #6c757d;
+    border-radius: 50%;
+    color: #6c757d;
+    font-size: 2rem;
+    transition-duration: 0.3s;
+
+    &[draggable="true"] {
+      cursor: move;
+      /* fallback if grab cursor is unsupported */
+      cursor: grab;
+      cursor: -moz-grab;
+      cursor: -webkit-grab;
+
+      &:active {
+        cursor: grabbing;
+        cursor: -moz-grabbing;
+        cursor: -webkit-grabbing;
+      }
+    }
+
+    &:hover {
+      background-color: #dee2e6;
+      border-color: #495057;
+      color: #495057;
+    }
+  }
+
+  .info-container {
+    font-size: 0.75em;
+    margin-bottom: 7px;
+    padding-top: 5px;
+
+    strong {
+      font-weight: bold;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      overflow: clip;
+      display: block;
+      padding: 0 5px 7px 5px;
+    }
+
+    .code {
+      font-family: monospace;
+      font-size: 10px;
+      margin-bottom: 5px;
+    }
+
+    .button-container {
+      display: flex;
+      justify-content: center;
+      align-items: space-between;
+    }
+  }
+}
+</style>
+
+<script setup lang="ts">
+import { t } from "@client/plugins/i18n.js";
+import { faFileImport, faEraser, faMusic } from "@fortawesome/free-solid-svg-icons";
+import { convertToHumanReadableFileSize, escapeMarkdownAltText } from "@fumix/fu-blog-common";
+import type { PropType } from "vue";
+
+const getMarkdownString = () => {
+  return `![audio:${escapeMarkdownAltText(props.value.name)}](${props.hash})`;
+};
+
+const onDragStart = (event: DragEvent) => {
+  if (props.showPaste) {
+    const audioIcon = event.target as HTMLElement;
+    event.dataTransfer?.setDragImage(audioIcon, 0, 0);
+    event.dataTransfer?.setData("text/plain", getMarkdownString());
+  }
+};
+
+const props = defineProps({
+  hash: {
+    type: String,
+    required: true,
+  },
+  value: {
+    type: Object as PropType<File>,
+    required: true,
+  },
+  showDelete: {
+    type: Boolean,
+    default: true,
+  },
+  showPaste: {
+    type: Boolean,
+    default: true,
+  },
+});
+
+const emits = defineEmits(["paste", "delete", "softdelete"]);
+</script>

client/src/components/MarkDown.vue

@@ -7,17 +7,22 @@
   min-height: 520px;
 
   svg {
-    max-width: 100% !important;
-    height: auto !important;
+    max-width: 100%;
+    height: auto;
 
     g > * :not(text) {
       stroke: #ccc !important;
     }
   }
 
   img {
-    max-width: 100% !important;
-    height: auto !important;
+    max-width: 100%;
+    height: auto;
+  }
+
+  audio {
+    max-width: 100%;
+    margin: 10px 0;
   }
 }
 </style>
@@ -34,7 +39,7 @@ const props = defineProps({
   markdown: {
     type: String as PropType<string | null>,
   },
-  customImageUrls: {
+  customFileUrls: {
     type: Object as PropType<{ [sha256: string]: File }>,
     default: () => {},
   },
@@ -47,11 +52,11 @@ watch(props, async () => {
     emits("loading", true);
     sanitizedHtml.value = await MarkdownConverterClient.Instance.convert(props.markdown ?? "", async (token: string) => {
       if (!token || token.length < 10) {
-        return Promise.reject("Image hash too short");
+        return Promise.reject("File hash too short");
       }
-      const urls = Object.keys(props.customImageUrls).filter((it) => it.startsWith(token));
+      const urls = Object.keys(props.customFileUrls).filter((it) => it.startsWith(token));
       if (urls && urls.length === 1) {
-        const customFile = props.customImageUrls[urls[0]];
+        const customFile = props.customFileUrls[urls[0]];
         return blobToArray(customFile).then((it) => bytesToDataUrl(customFile.type, it));
       }
       return Promise.reject("No custom file found");

client/src/i18n/de.json

@@ -24,9 +24,11 @@
       "cancel": "Abbrechen",
       "edit": "Bearbeiten",
       "insert_image": "Bild einfügen",
+      "insert_audio": "Audio einfügen",
       "delete": "Löschen",
       "delete_image": "Bild löschen",
-      "remove": "Bildrefernz aus Text entfernen",
+      "delete_audio": "Audio löschen",
+      "remove": "Dateireferenz aus Text entfernen",
       "read": "Lesen",
       "create_post": "Post erstellen",
       "roles": "Rollen",
@@ -62,8 +64,8 @@
         "tags": "Schlagworte",
         "enter": "Geben Sie Schlagworte ein..."
       },
-      "imageupload": "keine angehängten Bilder | ein angehängtes Bild | {count} angehängte Bilder",
-      "imageupload_hint": "(Bild per Drag & Drop in den Text ziehen)"
+      "fileupload": "keine angehängten Dateien | eine angehängte Datei | {count} angehängte Dateien",
+      "fileupload_hint": "(Datei per Drag & Drop in den Text ziehen)"
     },
     "confirm": {
       "title": "Löschen bestätigen",

client/src/i18n/en.json

@@ -24,8 +24,10 @@
       "cancel": "Cancel",
       "edit": "Edit",
       "insert_image": "Insert image",
+      "insert_audio": "Insert audio",
       "delete_image": "Delete image",
-      "remove": "Remove image reference from text",
+      "delete_audio": "Delete audio",
+      "remove": "Remove file reference from text",
       "read": "Read",
       "create_post": "Create Post",
       "roles": "Roles",
@@ -57,8 +59,8 @@
       "preview": {
         "title": "Preview"
       },
-      "imageupload": "Upload image",
-      "imageupload_hint": "(drag onto textarea to insert)",
+      "fileupload": "Upload files",
+      "fileupload_hint": "(drag onto textarea to insert)",
       "tags": "Tags"
     },
     "confirm": {

client/src/util/api-client.ts

@@ -8,16 +8,16 @@ import type {
   LoggedInUserInfo,
   NewPostRequestDto,
   PublicPost,
-  SupportedImageMimeType,
+  SupportedFileMimeType,
 } from "@fumix/fu-blog-common";
 import { HttpHeader, imageBytesToDataUrl } from "@fumix/fu-blog-common";
 
 export type ApiUrl = `/api/${string}`;
 
 async function callServer<
   RequestType,
-  ResponseMimeType extends SupportedImageMimeType | JsonMimeType,
-  ResponseType = ResponseMimeType extends JsonMimeType ? any : ResponseMimeType extends SupportedImageMimeType ? ArrayBuffer : any,
+  ResponseMimeType extends SupportedFileMimeType | JsonMimeType,
+  ResponseType = ResponseMimeType extends JsonMimeType ? any : ResponseMimeType extends SupportedFileMimeType ? ArrayBuffer : any,
 >(
   url: ApiUrl,
   method: "GET" | "POST",
@@ -101,7 +101,7 @@ export class OpenAiEndpoints {
     return callServer<string, JsonMimeType, AiSummaryData>("/api/utility/chatGptSummarize", "POST", "application/json", { json: text });
   }
   static async dallEGenerateImage(prompt: string): Promise<DataUrl> {
-    return callServer<string, SupportedImageMimeType, string>("/api/utility/dallEGenerateImage", "POST", "image/png", {
+    return callServer<string, SupportedFileMimeType, string>("/api/utility/dallEGenerateImage", "POST", "image/png", {
       json: prompt,
     })
       .then((it) => {

client/src/util/storage.ts

@@ -80,8 +80,6 @@ export function loadCssPreference(): UserTheme {
   );
 }
 
-
-
 //
 // General purpose helper functions, should only be called indirectly
 //