@christianriedl/media 1.0.16 → 1.0.19

package/package.json

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

package/src/components/FileUpload.vue

@@ -25,7 +25,7 @@
 </script>
 
 <template>
-    <v-row>
+    <v-row align="center">
         <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>
@@ -35,14 +35,6 @@
         <v-col cols="6">{{feedBack}}
         </v-col>
     </v-row>
-    <!--
-    <v-col cols="2">
-        <v-btn @click="onUpload">
-            <v-icon large>{{$vuetify.icons.values.upload}}</v-icon>Upload
-        </v-btn>
-    </v-col>
-    -->
-   <p>{{loadResult}}</p>
 </template>
 
 <style scoped>

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);
@@ -294,7 +296,7 @@
         <audio ref="audio" preload="none" @ended="onEnded" @timeupdate="onTimeUpdate">
         </audio>
         <v-list-item three-line>
-            <v-row>
+            <v-row align="center">
                 <v-col cols="1">
                     <v-list-item-avatar tile rounded="0" size="x-large" v-if="selected.ThumbnailUrl">
                         <img width="60" :src="selected.ThumbnailUrl">
@@ -315,6 +317,12 @@
                               dense solo hide-details single-line>
                     </v-select>
                 </v-col>
+                <v-col v-else cols="1" offset="3">
+                    <v-btn v-if="!isMobile" class="bg-media" @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')!;