feat(front): [WIP] new upload process #2081

front/src/components/library/FileUpload.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import type { BackendError, Library, FileSystem, PrivacyLevel } from '~/types'
+import type { BackendError, FileSystem, Library, PrivacyLevel } from '~/types'
+import type { paths } from '~/generated/types'
 import type { VueUploadItem } from 'vue-upload-component'
 
 import { computed, ref, reactive, watch, nextTick } from 'vue'
@@ -30,7 +31,6 @@ interface Events {
 }
 
 interface Props {
-  library: Library
   defaultImportReference?: string
 }
 
@@ -68,6 +68,32 @@ const uploads = reactive({
   objects: {} as Record<string, any>
 })
 
+// Select corresponding user-library when slider changes
+
+const sharedLabels = useSharedLabels()
+
+const options = {
+  me: sharedLabels.fields.privacy_level.choices.me,
+  instance: sharedLabels.fields.privacy_level.choices.instance,
+  everyone: sharedLabels.fields.privacy_level.choices.everyone
+} as const satisfies Record<PrivacyLevel, string>
+
+const privacyLevel = defineModel<keyof typeof options>({ required: true })
+
+const library = ref<Library>()
+watch(privacyLevel, async(newValue) => { try {
+  const response = await axios.get<paths['/api/v2/libraries/']['get']['responses']['200']['content']['application/json']>('libraries/', {
+    params: {
+      privacy_level: privacyLevel.value,
+      scope: 'me'
+    }
+  })
+
+  library.value = response.data.results.find(({name})=>name===privacyLevel.value)
+} catch (error) {
+  useErrorHandler(error as Error)
+}}, { immediate: true })
+
 //
 // File counts
 //
@@ -89,7 +115,7 @@ const processableFiles = computed(() => uploads.pending
 const importReference = ref(props.defaultImportReference || new Date().toISOString())
 history.replaceState(history.state, '', updateQueryString(location.href, 'import', importReference.value))
 const uploadData = computed(() => ({
-  library: props.library.uuid,
+  library: library.value?.uuid,
   import_reference: importReference
 }))
 
@@ -111,7 +137,8 @@ const fetchStatus = async () => {
         params: {
           import_reference: importReference.value,
           import_status: status,
-          page_size: 1
+          page_size: 1,
+          library: library.value?.uuid
         }
       })
 
@@ -249,7 +276,7 @@ const importFs = async () => {
   try {
     const response = await axios.post('libraries/fs-import', {
       path: fsPath.value.join('/'),
-      library: props.library.uuid,
+      library: library.value?.uuid,
       import_reference: importReference.value
     })
 
@@ -298,17 +325,6 @@ useEventListener(window, 'beforeunload', (event) => {
   event.preventDefault()
   return (event.returnValue = t('components.library.FileUpload.message.listener'))
 })
-
-const sharedLabels = useSharedLabels()
-
-const options = {
-  me: sharedLabels.fields.privacy_level.choices.me,
-  instance: sharedLabels.fields.privacy_level.choices.instance,
-  everyone: sharedLabels.fields.privacy_level.choices.everyone
-} as const satisfies Record<PrivacyLevel, string>;
-
-const option = ref<keyof typeof options>("me");
-
 </script>
 
 <template>
@@ -322,7 +338,7 @@ const option = ref<keyof typeof options>("me");
       </div>
     </div>
   </div>
-  <Slider :options="options" v-model="option" :label="t('components.manage.library.UploadsTable.label.visibility')" />
+  <Slider :options="options" v-model="privacyLevel" :label="t('components.manage.library.UploadsTable.label.visibility')" />
   <file-upload-widget
     ref="upload"
     v-model="files"
@@ -345,7 +361,7 @@ const option = ref<keyof typeof options>("me");
       {{ t('components.library.FileUpload.message.local.message') }}
     </p>
     <ul>
-      <li v-if="library.privacy_level != 'me'">
+      <li v-if="library?.privacy_level != 'me'">
         {{ t('components.library.FileUpload.message.local.copyright') }}
       </li>
       <li>

front/src/components/library/FsBrowser.vue

@@ -45,7 +45,6 @@ const path = computed (() => props.data.root + '/' + value.value.join('/'))
     <Layout flex>
       <Input
         v-model="path"
-        disabled
       />
       <Button
         primary

front/src/ui/modals/Upload.vue

@@ -12,7 +12,7 @@ import Spacer from '~/components/ui/Spacer.vue'
 import Alert from '~/components/ui/Alert.vue'
 import Card from '~/components/ui/Card.vue'
 
-import type { Actor, Channel } from '~/types'
+import type { Actor, Channel, PrivacyLevel } from '~/types'
 import FileUploadWidget from '~/components/library/FileUploadWidget.vue'
 import type { VueUploadItem } from 'vue-upload-component'
 import ChannelUpload from '~/components/channels/UploadForm.vue'
@@ -44,16 +44,12 @@ const destinationSelected = (destination: UploadDestination) =>
 
 // Step 1.1
 
-/*
-- Load the library for the chosen privacy level
--
-*/
+// Load the library for the chosen privacy level
+const privacyLevel = ref<PrivacyLevel>('me')
 
 // Lade User
 const url="`federation/actors/${object.full_username}/libraries/`"
 
-//
-
 // Step 2
 const filesSelected = (e: InputEvent)=>{
     state.value = {...state.value, files: [] }
@@ -77,6 +73,18 @@ const channelUpload = ref();
   <!-- Page 1 -->
 
   <Layout flex style="place-content:center" v-if="state.page === 'selectDestination'">
+    <Card
+      small
+      solid
+      title="Music"
+      icon="bi-upload"
+      @click="destinationSelected('library')"
+    >
+      <template #image>
+        <i class="bi bi-headphones solid secondary raised" :class="$style.icon"></i>
+      </template>
+      {{ "Host music you listen to" /* TODO: Translate */ }}
+    </Card>
     <Card
       small
       title="Music"
@@ -101,18 +109,6 @@ const channelUpload = ref();
       </template>
       {{ "Publish podcasts you make" /* TODO: Translate */ }}
     </Card>
-    <Card
-      small
-      solid
-      title="Mix & Share"
-      icon="bi-upload"
-      @click="destinationSelected('library')"
-    >
-      <template #image>
-        <i class="bi bi-headphones solid secondary raised" :class="$style.icon"></i>
-      </template>
-      {{ "Host music you listen to" /* TODO: Translate */ }}
-    </Card>
   </Layout>
 
   <!-- Page 2 -->
@@ -126,8 +122,9 @@ const channelUpload = ref();
     <!--  -->
 
     <!-- Privacy Slider -->
-    <LibraryUpload v-if="state.uploadDestination === 'library'"
-      :library="{uuid: 'string'} /* Get corresponding library from user */">
+    <LibraryUpload
+      v-if="state.uploadDestination === 'library'"
+      v-model="privacyLevel">
     </LibraryUpload>
     {{ state.files }}
   </Layout>