@christianriedl/media 1.0.14 → 1.0.17

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@christianriedl/media",
-  "version": "1.0.14",
+  "version": "1.0.17",
   "description": "RIC media interfaces",
 
   "main": "dist/index.js",

package/src/components/FileUpload.vue

@@ -5,34 +5,36 @@
 
     const getMediaService = inject<() => MediaService>('get-media')!;
     const mediaService = getMediaService();
-    const fileInput = ref<HTMLInputElement | null>(null);
-    const loadResult = ref("");
+    const feedBack = ref("");
+    const name = ref("");
     
     async function onFileInput(event: any) {
-        const files = event.target.files
-        const formData = new FormData()
-        formData.append('upload', files[0]);
-        loadResult.value = "Start upload";
-        const rc = await mediaService.upload(formData);
-        loadResult.value = rc ? "Upload successful" : "Upload failed";
-    }
-    /*
-    function onUpload(ev : InputEvent) {
-        const file = fileInput.value!.files![0];
-        const reader = new FileReader();
-        loadResult.value = "start upload ...";
-        reader.onload = async (e) => {
-            var text = reader.result;
-            var res = await stocks.upload(text as string);
-            loadResult.value = res;
+        const files = event.target.files as File[];
+        feedBack.value = "Start Upload";
+        let count = 0;
+        for (let i = 0; i < files.length; i++) {
+            const formData = new FormData()
+            formData.append(name.value, files[i]);
+            const rc = await mediaService.upload(formData);
+            if (rc)
+                count++;
+            feedBack.value = `${files[i].name} : ${rc ? " - OK" : "- FAILED" }`; 
         }
-        reader.readAsText(file);
+        feedBack.value = `${count} von ${files.length} erfolgreich hochgeladen ! (Close : Upload Icon)`;
     }
-    */
 </script>
 
 <template>
-    <input ref="fileInput" type="file" style="width:25%" @change="onFileInput">
+    <v-row>
+        <v-col cols="2">
+            <v-text-field name="directory" label="Name (Directory)" type="text" v-model="name" density="compact" hide-details></v-text-field>
+        </v-col>
+        <v-col cols="4">
+            <input type="file" multiple @change="onFileInput">
+        </v-col>
+        <v-col cols="6">{{feedBack}}
+        </v-col>
+    </v-row>
     <!--
     <v-col cols="2">
         <v-btn @click="onUpload">

package/src/views/MusicPage.vue

@@ -3,6 +3,7 @@
     import { IAppState, Helper } from '@christianriedl/utils';
     import { Authorize, EScope } from '@christianriedl/rest';
     import { EItemType, EMediaType, IMediaFolder, IMediaItem, IAudioFile, MediaService, EPlayState, PlayerService } from '@christianriedl/media';
+    import FileUpload from '../components/FileUpload.vue';
 
     const appState = inject<IAppState>('appstate')!;
     const authorize = inject<Authorize>('authorize')!;
@@ -28,6 +29,7 @@
     const playIndex = ref(-1);
     const volume = ref(0);
     const mute = ref(false);
+    const uploadVisible = ref(false);
 
     const isLocal = computed(() => currentPlayer.value == 'Local');
     const backVisible = computed(() => selected.value.ItemType != EItemType.AudioRoot);
@@ -315,6 +317,12 @@
                               dense solo hide-details single-line>
                     </v-select>
                 </v-col>
+                <v-col v-else cols="4" lign-self="end">
+                    <v-btn v-if="!isMobile" @click="uploadVisible = !uploadVisible">
+                        UPLOAD
+                        <v-icon>{{$vuetify.icons.values.upload}}</v-icon>
+                    </v-btn>
+                </v-col>
             </v-row>
         </v-list-item>
         <v-card-actions>
@@ -342,16 +350,17 @@
                 <v-icon>{{$vuetify.icons.values.download}}</v-icon>
             </v-btn>
             <v-slider v-if="!isLocal && playingTrack" style="width:30%" color="red" track-color="blue" track-fill-color="red" v-model="volume" hide-details density="compact"
-                    min="0" max="100" step="5" @update:modelValue="changeVolume">
+                      min="0" max="100" step="5" @update:modelValue="changeVolume">
             </v-slider>
         </v-card-actions>
         <v-progress-linear v-if="playingTrack" v-model="positionLength" color="blue" height="25"><strong>{{positionText}}</strong></v-progress-linear>
     </v-card>
+    <file-upload v-if="uploadVisible"></file-upload>
     <v-card :height="listHeight" class="overflow-y-auto bg-media">
         <v-list two-line class="bg-media">
-            <v-list-item-group v-model="itemIndex"  >
-                <v-list-item v-for="(item,index) in items" :key="item.DLNAID" :title="item.title" :subtitle="item.subTitle" 
-                                active-color="blue" :active="index == playIndex" @click="listItem(item)">
+            <v-list-item-group v-model="itemIndex">
+                <v-list-item v-for="(item,index) in items" :key="item.DLNAID" :title="item.title" :subtitle="item.subTitle"
+                             active-color="blue" :active="index == playIndex" @click="listItem(item)">
                     <!--
                     <v-list-item-content>
                         <v-list-item-title v-html="item.title"></v-list-item-title>

package/src/views/PhotosPage.vue

@@ -4,7 +4,7 @@
     import { useRouter } from 'vue-router';
     import { IAppState } from '@christianriedl/utils';
     import { EItemType, EMediaType, IMediaFolder, IMediaItem, IPhotoSelection, MediaService } from '@christianriedl/media';
-    import FileUpload from '../components/FileUpload.vue'
+    import FileUpload from '../components/FileUpload.vue';
 
     const appState = inject<IAppState>('appstate')!;
     const getMediaService = inject<() => MediaService>('get-media')!;
@@ -18,6 +18,7 @@
     const selected = reactive<IPhotoSelection>(mediaService.photoSelection);
     const listHeight = ref(0);
     const listhead = ref<any>(null);
+    const uploadVisible = ref(false);
 
     const roots: string[] = ['Jahr', 'Orte', 'Ereignisse', 'Personen'];
     const criterias: string[] = ['ye', 'lo', 'ev', 'pe'];
@@ -161,15 +162,19 @@
                 <v-icon large>{{$vuetify.icons.values.back}}</v-icon>Back
             </v-btn>
             <v-rating clearable length="2" v-model="selected.rating" @update:modelValue="onRating" />
-            <v-select v-model="selected.root" 
-                        :items="roots"
-                        persistent-hint
-                        @update:modelValue="onRootChange"
-                        dense solo hide-details single-line>
+            <v-select v-model="selected.root"
+                      :items="roots"
+                      persistent-hint
+                      @update:modelValue="onRootChange"
+                      dense solo hide-details single-line>
             </v-select>
-            <file-upload></file-upload>
+            <v-btn v-if="!isMobile" @click="uploadVisible = !uploadVisible">
+                UPLOAD
+                <v-icon>{{$vuetify.icons.values.upload}}</v-icon>
+            </v-btn>
         </v-card-actions>
     </v-card>
+    <file-upload v-if="uploadVisible"></file-upload>
     <v-card :max-height="listHeight" class="overflow-y-auto">
         <v-list v-if="!grouped" class="bg-media" >
             <v-list-item-group v-model="itemIndex" color="primary">