views

components/AlbumSelector.vue

@@ -0,0 +1,18 @@
+<script lang="ts" setup>
+import { BccSelect } from "@bcc-code/design-library-vue";
+
+defineProps<{
+    albums: readonly string[];
+}>();
+
+const value = defineModel<string>();
+</script>
+
+<template>
+    <BccSelect v-model="value" :label="$t('album')">
+        <option disabled value="">{{ $t("selectAnOption") }}</option>
+        <option v-for="a in albums" :value="a">
+            {{ a }}
+        </option>
+    </BccSelect>
+</template>

components/BmmSingleMetadata.vue → components/bmm/BmmSingleMetadata.vue

@@ -1,12 +1,17 @@
 <script lang="ts" setup>
 import { BccButton, BccInput } from "@bcc-code/design-library-vue";
 
+defineProps<{
+    languages: string[];
+    albums: string[];
+}>();
+
 const form = defineModel<BMMSingleForm>({ required: true });
 
 const albumId = computedProperty(form, "albumId");
 const trackId = computedProperty(form, "trackId");
 const language = computedProperty(form, "language");
-const originalTitle = computedProperty(form, "originalTitle");
+const title = computedProperty(form, "title");
 
 defineEmits<{
     set: [];
@@ -15,14 +20,20 @@ defineEmits<{
 <template>
     <form class="flex flex-col gap-4 p-4" @submit.prevent="$emit('set')">
         <h3 class="text-lg font-bold">BMM Upload</h3>
-        <BccInput v-model="albumId" :label="$t('album')" />
-        <BccInput v-model="trackId" :label="$t('track')" />
-        <BccInput
-            v-model="originalTitle"
-            :label="$t('originalTitle')"
-            required
+        <AlbumSelector
+            v-model="albumId"
+            :label="$t('album')"
+            :albums="albums"
+        />
+        <BmmTrackSelector
+            v-if="albumId"
+            :key="albumId"
+            v-model="trackId"
+            :album="albumId"
+            :label="$t('track')"
         />
-        <LanguageSelector v-model="language" :languages="bmmLanguages" />
+        <BccInput v-model="title" :label="$t('title')" required />
+        <LanguageSelector v-model="language" :languages="languages" />
         <BccButton type="submit">{{ $t("next") }}</BccButton>
     </form>
 </template>

components/bmm/BmmTrackSelector.vue

@@ -0,0 +1,64 @@
+<script lang="tsx" setup>
+import { BccFormLabel } from "@bcc-code/design-library-vue";
+
+const tracks = ref<Track[]>();
+
+const props = defineProps<{
+    album: string;
+    label: string;
+}>();
+
+onMounted(async () => {
+    tracks.value = await $fetch("/api/bmm/tracks/" + props.album, {
+        method: "GET",
+    });
+});
+
+const value = defineModel<number>();
+
+const clicked = ref(false);
+
+const display = computed(() => {
+    return tracks.value?.find((i) => i.id === value.value);
+});
+
+const dateString = (date: Date) => {
+    return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
+};
+
+const TrackView = (props: { track: Track }) => {
+    const track = props.track;
+    return (
+        <p class="flex cursor-pointer gap-2 rounded bg-slate-50 pl-2">
+            <span>{dateString(new Date(track.published_at))}</span>
+            <span class="rounded-r bg-slate-200 px-2">{track.title}</span>
+        </p>
+    );
+};
+</script>
+
+<template>
+    <div>
+        <BccFormLabel>
+            {{ label }}
+        </BccFormLabel>
+        <div v-if="!clicked" class="flex">
+            <TrackView
+                @click="clicked = true"
+                v-if="display"
+                :track="display"
+            />
+        </div>
+        <div v-else class="flex flex-col gap-2">
+            <div v-for="t in tracks" class="flex">
+                <TrackView
+                    :track="t"
+                    @click="
+                        value = t.id;
+                        clicked = false;
+                    "
+                />
+            </div>
+        </div>
+    </div>
+</template>

locales/en.json

@@ -1,6 +1,6 @@
 {
     "dragAndDropFileHere": "Drag and drop file here or click to browse",
-    "originalTitle": "Original title",
+    "title": "Title",
     "language": "Language",
     "selectAnOption": "Select an option...",
     "album": "Album",

nuxt.config.ts

@@ -42,6 +42,9 @@ export default defineNuxtConfig({
                 baseUrl: "",
             },
             tempDrivePath: "",
+            bmm: {
+                token: "",
+            },
         },
         public: {
             auth: {

pages/upload/bmm.vue

@@ -1,8 +1,35 @@
+<script lang="ts" setup>
+const form = ref<BMMSingleForm>({
+    title: "",
+});
+
+const metadataIsSet = ref(false);
+
+const selectedFile = ref<File | null>(null);
+
+const me = ref<{
+    languages: string[];
+    albums: string[];
+}>();
+
+onMounted(async () => {
+    me.value = await $fetch("/api/bmm/me", {
+        method: "GET",
+    });
+});
+</script>
+
 <template>
     <div
-        class="mx-auto flex h-screen max-w-screen-md flex-col gap-4 rounded-lg bg-stone-300 p-4 text-black"
+        class="mx-auto flex min-h-screen max-w-screen-md flex-col gap-4 rounded-lg bg-stone-300 p-4 text-black"
+        v-if="me"
     >
-        <BmmSingleMetadata v-model="form" @set="metadataIsSet = true" />
+        <BmmSingleMetadata
+            v-model="form"
+            @set="metadataIsSet = true"
+            :languages="me.languages"
+            :albums="me.albums"
+        />
         <div
             class="flex flex-col gap-4 p-4 transition"
             :class="[
@@ -20,13 +47,3 @@
         </div>
     </div>
 </template>
-
-<script lang="ts" setup>
-const form = ref<BMMSingleForm>({
-    originalTitle: "",
-});
-
-const metadataIsSet = ref(false);
-
-const selectedFile = ref<File | null>(null);
-</script>

server/api/bmm/me.ts

@@ -0,0 +1,6 @@
+export default defineEventHandler(async (event) => {
+    return {
+        languages: ["nb", "en"],
+        albums: ["fra-kaare", "romans"],
+    };
+});

server/api/bmm/tracks/[album].ts

@@ -0,0 +1,9 @@
+export default defineEventHandler(async (event) => {
+    const album = getRouterParam(event, "album");
+
+    switch (album) {
+        case "fra-kaare":
+            return await getFraKaareTracks();
+    }
+    return [];
+});

server/utils/bmm.ts

@@ -0,0 +1,24 @@
+import type { Track } from "~/utils/bmm";
+
+export const getFraKaareTracks = async () => {
+    const tracks = await $fetch(
+        "https://bmm-api.brunstad.org/track?tags=fra-kaare&size=100",
+        {
+            method: "GET",
+            headers: {
+                Authorization: "Bearer " + useRuntimeConfig().api.bmm.token,
+                "Accept-Language": "nb",
+            },
+        },
+    );
+
+    return (tracks as Track[]).map(
+        (i) =>
+            ({
+                id: i.id,
+                title: i.title,
+                type: "track",
+                published_at: i.published_at,
+            }) as Track,
+    );
+};

utils/bmm.ts

@@ -1,6 +1,15 @@
+export type Track = {
+    title: string;
+    id: number;
+    type: "track";
+    published_at: string;
+};
+
+export type TrackSubType = "audiobook";
+
 export type BMMSingleForm = {
-    originalTitle: string;
+    title: string;
     albumId?: string;
-    trackId?: string;
+    trackId?: number;
     language?: (typeof bmmLanguages)[number];
 };

utils/computedProperty.ts

@@ -1,15 +1,16 @@
-export default <T extends {}>(ref: Ref<T | undefined>, property: keyof T) => {
+export default function computedProperty<T, K extends keyof T>(
+    mutable: Ref<T | undefined>,
+    property: K,
+): globalThis.Ref<T[K] | undefined> {
     return computed({
         get() {
-            return ref.value?.[property];
+            return mutable.value?.[property];
         },
         set(v) {
-            ref.value = ref.value
-                ? {
-                      ...ref.value,
-                      [property]: v,
-                  }
-                : undefined;
+            mutable.value = {
+                ...(mutable.value ?? ({} as T)),
+                [property]: v,
+            };
         },
     });
-};
+}

utils/permissions.ts

@@ -0,0 +1,3 @@
+export type Role = "fra-kaare-translator";
+
+export const roleTags = (roles: Role[]) => {};